本來是比較好的，方便使用，但是這個toast會顯示出圖標，而且不能去除。

假設：我們執行完業務的時候，toast一下，當執行成功的時候，效果還可以接受，如下圖：

但是，當執行失敗的時候，如下圖：

失敗了，你還顯示個扣扣圖案，那到底是成功還是失敗??這肯定是不能接受的。【捂臉】

若是給老板看到這種效果，又是一頓臭罵，程序猿的委屈哭

下面介紹一個自定義的toast

效果：

具體實現：

wxml：

1. button 
2.  
3. {{toastText}} 

wxss：

1. Page { 
2.  
3. background: #fff; 
4.  
5. } 
6.  
7. /*按鈕*/ 
8.  
9. .btn { 
10.  
11. font-size: 28rpx; 
12.  
13. padding: 15rpx 30rpx; 
14.  
15. width: 100rpx; 
16.  
17. margin: 20rpx; 
18.  
19. text-align: center; 
20.  
21. border-radius: 10rpx; 
22.  
23. border: 1px solid #000; 
24.  
25. } 
26.  
27. /*mask*/ 
28.  
29. .toast_mask { 
30.  
31. opacity: 0; 
32.  
33. width: 100%; 
34.  
35. height: 100%; 
36.  
37. overflow: hidden; 
38.  
39. position: fixed; 
40.  
41. top: 0; 
42.  
43. left: 0; 
44.  
45. z-index: 888; 
46.  
47. } 
48.  
49. /*toast*/ 
50.  
51. .toast_content_box { 
52.  
53. display: flex; 
54.  
55. width: 100%; 
56.  
57. height: 100%; 
58.  
59. justify-content: center; 
60.  
61. align-items: center; 
62.  
63. position: fixed; 
64.  
65. z-index: 999; 
66.  
67. } 
68.  
69. .toast_content { 
70.  
71. width: 50%; 
72.  
73. padding: 20rpx; 
74.  
75. background: rgba(0, 0, 0, 0.5); 
76.  
77. border-radius: 20rpx; 
78.  
79. } 
80.  
81. .toast_content_text { 
82.  
83. height: 100%; 
84.  
85. width: 100%; 
86.  
87. color: #fff; 
88.  
89. font-size: 28rpx; 
90.  
91. text-align: center; 
92.  
93. } 

js：

1. Page({ 
2.  
3. data: { 
4.  
5. //toast默認不顯示 
6.  
7. isShowToast: false 
8.  
9. }, 
10.  
11. showToast: function () { 
12.  
13. var _this = this; 
14.  
15. // toast時間 
16.  
17. _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000; 
18.  
19. // 顯示toast 
20.  
21. _this.setData({ 
22.  
23. isShowToast: true, 
24.  
25. }); 
26.  
27. // 定時器關閉 
28.  
29. setTimeout(function () { 
30.  
31. _this.setData({ 
32.  
33. isShowToast: false 
34.  
35. }); 
36.  
37. }, _this.data.count); 
38.  
39. }, 
40.  
41. /* 點擊按鈕 */ 
42.  
43. clickBtn: function () { 
44.  
45. console.log("你點擊了按鈕") 
46.  
47. //設置toast時間，toast內容 
48.  
49. this.setData({ 
50.  
51. count: 1500, 
52.  
53. toastText: 'Michael’s　Toast' 
54.  
55. }); 
56.  
57. this.showToast(); 
58.  
59. } 
60.  
61. })