微信小程序 自定义Toast

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) {    },})