微信小程序开发之自定义toast实例讲解

本来是比较好的，方便使用，但是这个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. })