微信小程序自定義toast代碼開發實用組件/插件。

小程序交互僅提供這些API

wx.showToast的效果是這樣的，太難看了

現在我們來自己寫個toast

一、我們把樣式寫在app.wxss里，這樣每個地方都可以調用到

1. /*toast start*/ 
2.  
3. .wxapp-toast-mask{ 
4.  
5. opacity: 0; 
6.  
7. width: 100%; 
8.  
9. height: 100%; 
10.  
11. overflow: hidden; 
12.  
13. position: fixed; 
14.  
15. top: 0; 
16.  
17. left: 0; 
18.  
19. z-index: 888; 
20.  
21. } 
22.  
23. .wxapp-toast-content-box { 
24.  
25. display: flex; 
26.  
27. width: 100%; 
28.  
29. height: 100%; 
30.  
31. justify-content: center; 
32.  
33. align-items: center; 
34.  
35. position: fixed; 
36.  
37. z-index: 999; 
38.  
39. } 
40.  
41. .wxapp-toast-content { 
42.  
43. width: 50%; 
44.  
45. padding: 20rpx; 
46.  
47. background: rgba(0, 0, 0, 0.7); 
48.  
49. border-radius: 20rpx; 
50.  
51. } 
52.  
53. .wxapp-toast-content-text { 
54.  
55. height: 100%; 
56.  
57. width: 100%; 
58.  
59. color: #fff; 
60.  
61. font-size: 28rpx; 
62.  
63. text-align: center; 
64.  
65. } 
66.  
67. /*toast end*/ 

二、JS也是寫在在app.js里：

1. //自定義Toast 
2.  
3. showToast: function(text,o,count){ 
4.  
5. var _this = o; 
6.  
7. count = parseInt(count) ? parseInt(count) : 3000; 
8.  
9. _this.setData({ 
10.  
11. toastText:text, 
12.  
13. isShowToast: true, 
14.  
15. }); 
16.  
17. setTimeout(function () { 
18.  
19. _this.setData({ 
20.  
21. isShowToast: false 
22.  
23. }); 
24.  
25. },count); 
26.  
27. }, 

三、在需要調用的wxml文件中合適的地方加上下面代碼：(比如index.wxml，注意：有container要放在里面)
 

1. <view class="container"> 
2.     <!--wxapp-toast start--> 
3.     <view class="wxapp-toast-content-box" wx:if="{{isShowToast}}"> 
4.     <view class="wxapp-toast-content"> 
5.         <view class="wxapp-toast-content-text"> 
6.         {{toastText}} 
7.         </view> 
8.     </view> 
9.     </view> 
10.     <!--wxapp-toast end--> 
11. </view> 

(或者說把這段放到footer.wxml里，每個文件用include引用一下)

四、然后在對應的js文件放一條代碼：(比如對應的index.js)

app.showToast('我是自定義的Toast',that,2000);

五、效果：