作者：michael_ouyang，來(lái)自授權(quán)地址 
微信提供了一個(gè)toast的api wx.showToast() 
相關(guān)連接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject

本來(lái)是比較好的，方便使用，但是這個(gè)toast會(huì)顯示出圖標(biāo)，而且不能去除。 
假設(shè)：我們執(zhí)行完業(yè)務(wù)的時(shí)候，toast一下，當(dāng)執(zhí)行成功的時(shí)候，效果還可以接受，如下圖： 

但是，當(dāng)執(zhí)行失敗的時(shí)候，如下圖： 
失敗了，你還顯示個(gè)扣扣圖案，那到底是成功還是失??？？這肯定是不能接受的?！疚婺槨?nbsp;
若是給老板看到這種效果，又是一頓臭罵，程序猿的委屈哭 

下面介紹一個(gè)自定義的toast 
效果： 

具體實(shí)現(xiàn)： 
wxml：

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顯示的內(nèi)容-->
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：

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：

1. Page({
2. data: {
3. //toast默認(rèn)不顯示
4. isShowToast: false
5. },
6. showToast: function () {
7. var _this = this;
8. // toast時(shí)間
9. _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
10. // 顯示toast
11. _this.setData({
12. isShowToast: true,
13. });
14. // 定時(shí)器關(guān)閉
15. setTimeout(function () {
16. _this.setData({
17. isShowToast: false
18. });
19. }, _this.data.count);
20. },
21. /* 點(diǎn)擊按鈕 */
22. clickBtn: function () {
23. console.log("你點(diǎn)擊了按鈕")
24. //設(shè)置toast時(shí)間，toast內(nèi)容
25. this.setData({
26. count: 1500,
27. toastText: 'Michael’s　Toast'
28. });
29. this.showToast();
30. }
31. })