微信小程序之自定义toast实例 —— 微信小程序实战系列（6）

微信提供了一个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();
  }
})

更多小程序的教程

微信开发者工具的快捷键

微信小程序的文件结构 —— 微信小程序教程系列（1）

微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）

微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）

微信小程序的新建页面 —— 微信小程序教程系列（4）

微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）

微信小程序的页面跳转 —— 微信小程序教程系列（6）

微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）

微信小程序的作用域和模块化 —— 微信小程序教程系列（8）

微信小程序视图层的数据绑定 —— 微信小程序教程系列（9）

微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）