微信小程序 Toast自定义实例详解
成都创新互联公司服务项目包括惠安网站建设、惠安网站制作、惠安网页制作以及惠安网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，惠安网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到惠安省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
实现类似于Android的Toast提示
index.js：
var timer;
var inputinfo = "";
var app = getApp()
Page({
data: {
animationData:"",
showModalStatus:false
},
onLoad: function () {
},
showModal: function () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(200).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 200)
console.log("准备执行");
timer = setTimeout(function () {
if(this.data.showModalStatus){
this.hideModal();
console.log("是否执行");
}
}.bind(this), 3000)
},
clickbtn:function(){
if(this.data.showModalStatus){
this.hideModal();
}else{
this.showModal();
}
},
hideModal: function () {
if(timer != null){
clearTimeout(timer);
timer = null;
}
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(200).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
},
}) index.wxml：
要显示的内容
效果图：
源码下载链接：http://xiazai.jb51.net/201701/yuanma/toastTestNew(jb51.net).rar
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
