如何在微信小程序中自定義toast

如何在微信小程序中自定義toast？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

1、新建toast組件

在toast.json里修改如下，設(shè)置為組件

{
 "component": true
}

toast.wxml

<view class='wx-toast-box' animation="{{animationData}}">
 <view class='wx-toast-content'>
  <view class='wx-toast-toast'>{{ content }}</view>
 </view>
</view>

定義樣式，toast.wxss，這里使用flex布局，代碼很簡(jiǎn)單，也沒什么好說(shuō)的，直接貼上

.wx-toast-box{
 display: flex;
 width: 100%;
 justify-content: center;
 position: fixed;
 z-index: 999;
 bottom:80rpx;
 opacity: 0;
}
.wx-toast-content{
 max-width: 80%;
 border-radius:30rpx;
 padding: 30rpx;
 background: rgba(0, 0, 0, 0.6);
}
.wx-toast-toast{
 height: 100%;
 width: 100%;
 color: #fff;
 font-size: 28rpx;
 text-align: center;
}

toast.js

Component({
 options: {
  multipleSlots: true // 在組件定義時(shí)的選項(xiàng)中啟用多slot支持 
 },
 /** 
  * 私有數(shù)據(jù),組件的初始數(shù)據(jù) 
  * 可用于模版渲染 
  */
 data: { // 彈窗顯示控制 
  animationData: {},
  content: '提示內(nèi)容'
 },
 /**
  * 組件的方法列表 
  */
 methods: {
  /** 
   * 顯示toast，定義動(dòng)畫
   */
  showToast(val) {
   var animation = wx.createAnimation({
    duration: 300,
    timingFunction: 'ease',
   })
   this.animation = animation
   animation.opacity(1).step()
   this.setData({
    animationData: animation.export(),
    content: val
   })
   /**
    * 延時(shí)消失
    */
   setTimeout(function () {
    animation.opacity(0).step()
    this.setData({
     animationData: animation.export()
    })
   }.bind(this), 1500)
  }
 }
})

2、在父級(jí)組件中調(diào)用公共組件，以login頁(yè)面為例

在login.json中注冊(cè)組件

{
 "navigationBarTitleText": "登錄注冊(cè)",
 "usingComponents":{
  "toast": "../common/toast/toast"
 }
}

login.wxml中調(diào)用組件

<view>
 <toast id='toast'>
 </toast>
</view>

login.js里點(diǎn)擊登陸錄的時(shí)候調(diào)用顯示showDialog方法

onReady: function () {
  this.toast = this.selectComponent("#toast");
},
listenerLogin: function() {
  this.dialog.showToast('恭喜你，獲得了toast');
},

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。