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

版权声明：本文为博主原创文章，转载务必注明出处，http://blog.csdn.net/michael_ouyang。

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

相关连接：https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject

 

本来是比较好的，方便使用，但是这个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）

微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）

微信小程序视图层的模板 —— 微信小程序教程系列（12）

微信小程序wxss的尺寸单位rpx —— 微信小程序教程系列（13）

微信小程序的网络请求 —— 微信小程序教程系列（14）

微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）

微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）

微信小程序之顶部导航栏实例 —— 微信小程序实战系列（1）

微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）

微信小程序之轮播图实例 —— 微信小程序实战系列（3）

微信小程序之仿android fragment之可滑动的底部导航栏实例 —— 微信小程序实战系列（4）

微信小程序之登录页实例 —— 微信小程序实战系列（5）

更多小程序的教程请查看：http://blog.csdn.net/michael_ouyang/article/details/54700871

谢谢观看，不足之处，敬请指导