微信小程序 自定义Toast

Toast样式可以根据需求自定义，本例中是圆形

  
自定义Toast  
  
   
   {{toastText}}   
 
   
   {{toastText1}}   
 

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