微信小程序自定义toast代码

来自原文地址 
小程序交互仅提供这些API 

wx.showToast的效果是这样的，太难看了

现在我们来自己写个toast

一、我们把样式写在app.wxss里，这样每个地方都可以调用到

/*toast start*/
.wxapp-toast-mask{
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 888;
}
.wxapp-toast-content-box {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 999;
}
.wxapp-toast-content {
  width: 50%;
  padding: 20rpx;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 20rpx;
}
.wxapp-toast-content-text {
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}
/*toast end*/

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

  //自定义Toast
  showToast: function(text,o,count){
    var _this = o;
    count = parseInt(count) ? parseInt(count) : 3000;
    _this.setData({
      toastText:text,
      isShowToast: true,
    });
    setTimeout(function () {
      _this.setData({
        isShowToast: false
      });
    },count);
  },

三、在需要调用的wxml文件中合适的地方加上下面代码：(比如index.wxml，注意：有container要放在里面)

<view class="container">
    <!--wxapp-toast start-->
    <view class="wxapp-toast-content-box" wx:if="{{isShowToast}}">
    <view class="wxapp-toast-content">
        <view class="wxapp-toast-content-text">
        {{toastText}}
        </view>
    </view>
    </view>
    <!--wxapp-toast end-->
</view>

(或者说把这段放到footer.wxml里，每个文件用include引用一下) 

四、然后在对应的js文件放一条代码：(比如对应的index.js)

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

五、效果：