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

現(xiàn)在我們來自己寫個(gè)toast

一、我們把樣式寫在app.wxss里，這樣每個(gè)地方都可以調(diào)用到

1. /*toast start*/
2. .wxapp-toast-mask{
3. opacity: 0;
4. width: 100%;
5. height: 100%;
6. overflow: hidden;
7. position: fixed;
8. top: 0;
9. left: 0;
10. z-index: 888;
11. }
12. .wxapp-toast-content-box {
13. display: flex;
14. width: 100%;
15. height: 100%;
16. justify-content: center;
17. align-items: center;
18. position: fixed;
19. z-index: 999;
20. }
21. .wxapp-toast-content {
22. width: 50%;
23. padding: 20rpx;
24. background: rgba(0, 0, 0, 0.7);
25. border-radius: 20rpx;
26. }
27. .wxapp-toast-content-text {
28. height: 100%;
29. width: 100%;
30. color: #fff;
31. font-size: 28rpx;
32. text-align: center;
33. }
34. /*toast end*/

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

1. //自定義Toast
2. showToast: function(text,o,count){
3. var _this = o;
4. count = parseInt(count) ? parseInt(count) : 3000;
5. _this.setData({
6. toastText:text,
7. isShowToast: true,
8. });
9. setTimeout(function () {
10. _this.setData({
11. isShowToast: false
12. });
13. },count);
14. },

三、在需要調(diào)用的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里，每個(gè)文件用include引用一下) 

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

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

五、效果：