作者：michael_ouyang，来自授权地址 
微信提供了一个toast的api wx.showToast() 
相关连接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject

本来是比较好的，方便使用，但是这个toast会显示出图标，而且不能去除。 
假设：我们执行完业务的时候，toast一下，当执行成功的时候，效果还可以接受，如下图： 

但是，当执行失败的时候，如下图： 
失败了，你还显示个扣扣图案，那到底是成功还是失败？？这肯定是不能接受的。【捂脸】 
若是给老板看到这种效果，又是一顿臭骂，程序猿的委屈哭 

下面介绍一个自定义的toast 
效果： 

具体实现： 
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显示的内容-->
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默认不显示
4. isShowToast: false
5. },
6. showToast: function () {
7. var _this = this;
8. // toast时间
9. _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
10. // 显示toast
11. _this.setData({
12. isShowToast: true,
13. });
14. // 定时器关闭
15. setTimeout(function () {
16. _this.setData({
17. isShowToast: false
18. });
19. }, _this.data.count);
20. },
21. /* 点击按钮 */
22. clickBtn: function () {
23. console.log("你点击了按钮")
24. //设置toast时间，toast内容
25. this.setData({
26. count: 1500,
27. toastText: 'Michael’s　Toast'
28. });
29. this.showToast();
30. }
31. })