微信提供了一個toast的api  wx.showToast()

本來是比較好的，方便使用，但是這個toast會顯示出圖示，而且不能去除。

假設：我們執行完業務的時候，toast一下，當執行成功的時候，效果還可以接受，如下圖：

但是，當執行失敗的時候，如下圖：

失敗了，你還顯示個扣扣圖案，那到底是成功還是失敗？？這肯定是不能接受的。【捂臉】

若是給老闆看到這種效果，又是一頓臭罵，程式猿的委屈

下面介紹一個自定義的toast

效果：

具體實現：

wxml：

<!--按鈕-->
<view style="{{isShowToast?'position:fixed;':''}}">
  <view class="btn" bindtap="clickBtn">button</view>
</view>

<!--mask-->
<view class="toast_mask" wx:if="{{isShowToast}}"></view>
<!--以下為toast顯示的內容-->
<view class="toast_content_box" wx:if="{{isShowToast}}">
  <view class="toast_content">
    <view class="toast_content_text">
      {{toastText}}
    </view>
  </view>
</view>
 

wxss：

Page {
  background: #fff;
}
/*按鈕*/
.btn {
  font-size: 28rpx;
  padding: 15rpx 30rpx;
  width: 100rpx;
  margin: 20rpx;
  text-align: center;
  border-radius: 10rpx;
  border: 1px solid #000;
}
/*mask*/
.toast_mask {
  opacity: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 888;
}
/*toast*/
.toast_content_box {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 999;
}
.toast_content {
  width: 50%;
  padding: 20rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20rpx;
}
.toast_content_text {
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}
 

js：

Page({
  data: {
    //toast預設不顯示
    isShowToast: false 
  },
  showToast: function () {
    var _this = this;
    // toast時間
    _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 3000;
    // 顯示toast
    _this.setData({
      isShowToast: true,
    });
    // 定時器關閉
    setTimeout(function () {
      _this.setData({
        isShowToast: false
      });
    }, _this.data.count);
  },
  /* 點選按鈕 */
  clickBtn: function () {
    console.log("你點選了按鈕")
    //設定toast時間，toast內容
    this.setData({
      count: 1500,
      toastText: 'Michael’s　Toast'
    });
    this.showToast();
  }
})
 

微信小程式教程系列

基礎篇

------------------------------------------------------------

實戰篇

------------------------------------------------------------

電商篇

------------------------------------------------------------

未完待續。。。

謝謝觀看，不足之處，敬請指導