微信小程序 Toast自定义实例详解

微信小程序 Toast自定义实例详解

微信小程序 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({

animatiHkxciVMtqonData: 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 () {

animhttp://ation.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

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。