1. 程式人生 > >微信小程式 自定義Toast

微信小程式 自定義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) {
  
  },})