首页 > PHP资讯 > 工具库 > 微信小程序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({     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:

   
         要显示的内容         

效果图:

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

更多微信小程序 Toast自定义实例详解相关文章请关注PHP中文网!

工具库

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持13不支持0