微信提供了一个toast的api  

本来是比较好的，方便使用，但是这个toast会显示出图标，而且不能去除。

假设：我们执行完业务的时候，toast一下，当执行成功的时候，效果还可以接受，如下图：

但是，当执行失败的时候，如下图：

失败了，你还显示个扣扣图案，那到底是成功还是失败？？这肯定是不能接受的。

下面介绍一个自定义的toast

效果：

具体实现：

wxml：

[html] view plain copy print?
1. <!--按钮-->  
2. <view style="{{isShowToast?'position:fixed;':''}}">  
3.   <view class="btn" bindtap="clickBtn">button</view>  
4. </view>  
5.   
6. <!--mask-->  
7. <view class="toast_mask" wx:if="{{isShowToast}}"></view>  
8. <!--以下为toast显示的内容-->  
9. <view class="toast_content_box" wx:if="{{isShowToast}}">  
10.   <view class="toast_content">  
11.     <view class="toast_content_text">  
12.       {{toastText}}  
13.     </view>  
14.   </view>  
15. </view>  
 
wxss：
[css] view plain copy print?
1. Page {  
2.   background: #fff;  
3. }  
4. /*按钮*/  
5. .btn {  
6.   font-size: 28rpx;  
7.   padding: 15rpx 30rpx;  
8.   width: 100rpx;  
9.   margin: 20rpx;  
10.   text-align: center;  
11.   border-radius: 10rpx;  
12.   border: 1px solid #000;  
13. }  
14. /*mask*/  
15. .toast_mask {  
16.   opacity: 0;  
17.   width: 100%;  
18.   height: 100%;  
19.   overflow: hidden;  
20.   position: fixed;  
21.   top: 0;  
22.   left: 0;  
23.   z-index: 888;  
24. }  
25. /*toast*/  
26. .toast_content_box {  
27.   display: flex;  
28.   width: 100%;  
29.   height: 100%;  
30.   justify-content: center;  
31.   align-items: center;  
32.   position: fixed;  
33.   z-index: 999;  
34. }  
35. .toast_content {  
36.   width: 50%;  
37.   padding: 20rpx;  
38.   background: rgba(0, 0, 0, 0.5);  
39.   border-radius: 20rpx;  
40. }  
41. .toast_content_text {  
42.   height: 100%;  
43.   width: 100%;  
44.   color: #fff;  
45.   font-size: 28rpx;  
46.   text-align: center;  
47. }  
 
js：
[javascript] view plain copy print?
1. Page({  
2.   data: {  
3.     //toast默认不显示  
4.     isShowToast: false   
5.   },  
6.   showToast: function () {  
7.     var _this = this;  
8.     // toast时间  
9.     _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;  
10.     // 显示toast  
11.     _this.setData({  
12.       isShowToast: true,  
13.     });  
14.     // 定时器关闭  
15.     setTimeout(function () {  
16.       _this.setData({  
17.         isShowToast: false  
18.       });  
19.     }, _this.data.count);  
20.   },  
21.   /* 点击按钮 */  
22.   clickBtn: function () {  
23.     console.log("你点击了按钮")  
24.     //设置toast时间，toast内容  
25.     this.setData({  
26.       count: 1500,  
27.       toastText: 'Michael’s　Toast'  
28.     });  
29.     this.showToast();  
30.   }  
31. })

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！