Home > Article > WeChat Applet > Detailed explanation of custom toast examples of WeChat mini program
This article mainly introduces in detail the relevant methods of customizing toast in WeChat mini programs. It has certain reference value. Interested friends can refer to it.
WeChat provides a toast The api wx.showToast() is originally better and easier to use, but this toast will display the icon and cannot be removed.
Hypothesis: When we finish executing the business, toast it. When the execution is successful, the effect is acceptable, as shown below:
However, when the execution fails, as shown below:
It fails, and you still display a buckle pattern. Is it a success or a failure? ? This is certainly unacceptable.
If the boss sees this effect, he will be scolded again, which is the grievance of the programmer
The following introduces a custom toast
Effect:
Specific implementation:
wxml:
<!--按钮--> <view style="{{isShowToast?'position:fixed;':''}}"> <view class="btn" bindtap="clickBtn">button</view> </view> <!--mask--> <view class="toast_mask" wx:if="{{isShowToast}}"></view> <!--以下为toast显示的内容--> <view class="toast_content_box" wx:if="{{isShowToast}}"> <view class="toast_content"> <view class="toast_content_text"> {{toastText}} </view> </view> </view>
wxss:
Page { background: #fff; } /*按钮*/ .btn { font-size: 28rpx; padding: 15rpx 30rpx; width: 100rpx; margin: 20rpx; text-align: center; border-radius: 10rpx; border: 1px solid #000; } /*mask*/ .toast_mask { opacity: 0; width: 100%; height: 100%; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 888; } /*toast*/ .toast_content_box { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; position: fixed; z-index: 999; } .toast_content { width: 50%; padding: 20rpx; background: rgba(0, 0, 0, 0.5); border-radius: 20rpx; } .toast_content_text { height: 100%; width: 100%; color: #fff; font-size: 28rpx; text-align: center; }
js:
Page({ data: { //toast默认不显示 isShowToast: false }, showToast: function () { var _this = this; // toast时间 _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000; // 显示toast _this.setData({ isShowToast: true, }); // 定时器关闭 setTimeout(function () { _this.setData({ isShowToast: false }); }, _this.data.count); }, /* 点击按钮 */ clickBtn: function () { console.log("你点击了按钮") //设置toast时间,toast内容 this.setData({ count: 1500, toastText: 'Michael's Toast' }); this.showToast(); } })
The above is the detailed content of Detailed explanation of custom toast examples of WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!