微信小程序 Toast自定義實例詳解

2019-11-19 17:50:41

字體：大中小

來源：轉載

供稿：網友

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

<button type="default" bindtap="clickbtn">  點擊 </button> <view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view> <view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}"> <!--對話框標題-->  <view class="title-view">   <view class="toast-view">    要顯示的內容   </view>     </view> </view>

效果圖：