微信小程序 自定义Toast实例代码

<!--按钮-->  <view class="btn" bindtap="btn_toast">自定义Toast</view>  <!--以下为toast显示的内容 opacity为透明度-->  <view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">     {{toastText}}   </view>  <view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}">     {{toastText1}}   </view>  

Page {   background: #f9f9f9;  }  /*按钮*/  .btn {   width: 20%;    margin-left: 38%;  margin-top: 100rpx;  text-align: center;   border-radius: 10rpx;   border: 10px solid #f00;   background: #f00;  color: #fff;   font-size: 22rpx; }  /*toast*/  .toast_box {   width: 30%;   height: 221rpx;  margin-top: 60rpx;   margin-left: 35%;  text-align: center;   border-radius: 166rpx;   background: #f00;  color: #fff;   font-size: 32rpx;  line-height: 220rpx;  }  

Page({   /**   * 页面的初始数据   */  data: {   //toast默认不显示    isShowToast: false    },  showToast: function () {   var _this = this;   // toast时间    _this.data.count = parseInt(_this.data.count) ? parseInt(_this.data.count) : 1000;   // 显示toast    _this.setData({    isShowToast: true,   });   // 定时器关闭    setTimeout(function () {    _this.setData({     isShowToast: false    });   }, _this.data.count);  },  /* 点击按钮 */  btn_toast: function () {   console.log("点击了按钮")   //设置toast时间，toast内容    this.setData({    count: 1500,    toastText: '自定义',    toastText1: 'Toast'   });   this.showToast();  },   /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    },})