Detailed explanation of WeChat applet Toast customization example
Implement Toast prompt similar to Android
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>
Rendering:
Thanks for reading, I hope it can help everyone, thank you for your support of this site!
For more detailed explanations of WeChat applet Toast custom examples and related articles, please pay attention to the PHP Chinese website!