微信小程序自定義toast組件的方法詳解【含動畫】

2019-11-19 11:36:13

字體：大中小

來源：轉載

供稿：網友

本文實例講述了微信小程序自定義toast組件的方法。分享給大家供大家參考，具體如下：

怎么創建就不說了，前面一篇有
微信小程序自定義prompt組件
直接上代碼

wxml

<!-- components/toast/toast.wxml --><view class="toast-box {{isShow? 'show':''}}" animation="{{animationData}}">  <view class="toast-content" >    <view class="toast-img">      <block wx:if="{{type==='success'}}">        <image class="toast-icon" src="xxx" />      </block>      <block wx:if="{{type==='fail'}}">        <image class="toast-icon" src="xxx" />      </block>    </view>    <view class="toast-title">{{title}}</view>  </view></view>

// components/toast/toast.jsComponent({ properties: { }, data: {  type: 'fail',  title: '你還沒有勾選呢！',  isShow: false,  animationData: '' }, methods: {  showToast: function (data) {   const self = this;   if (this._showTimer) {    clearTimeout(this._showTimer)   }   if (this._animationTimer) {    clearTimeout(this._animationTimer)   }   // display需要先設置為block之后，才能執行動畫   this.setData({    title: data.title,    type: data.type,    isShow: true,   });   this._animationTimer = setTimeout(() => {    const animation = wx.createAnimation({     duration: 500,     timingFunction: 'ease',     delay: 0    })    animation.opacity(1).step();    self.setData({     animationData: animation.export(),    })   }, 50)   this._showTimer = setTimeout(function () {    self.hideToast();    if (data.compelete && (typeof data.compelete === 'function')) {     data.compelete()    }   }, 1200 || (50 + data.duration))  },  hideToast: function () {   if (this._hideTimer) {    clearTimeout(this._hideTimer)   }   let animation = wx.createAnimation({    duration: 200,    timingFunction: 'ease',    delay: 0   })   animation.opacity(0).step();   this.setData({    animationData: animation.export(),   })   this._hideTimer = setTimeout(() => {    this.setData({     isShow: false,    })   }, 250)  } }})

json

{ "component": true, "usingComponents": {}}

wxss

/* components/toast/toast.wxss */.toast-box { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 11; display: none; opacity: 0;}.show{ display: block;}.toast-content { position: absolute; left: 50%; top: 35%; width: 350rpx; /*height: 250rpx;*/ border-radius: 10rpx; box-sizing: bordre-box; transform: translate(-50%, -50%); background: rgba(0, 0, 0, .7);}.toast-img{  width: 100%;  height: 120rpx;  padding-top: 15rpx;  box-sizing: bordre-box;  text-align: center;}.toast-icon{  width: 100rpx;  height: 100rpx;}.toast-title {  width: 100%;  padding:10rpx;  line-height: 65rpx;  color: white;  text-align: center;  font-size: 40rpx;  box-sizing: border-box;}

使用

例如，在index.html中使用

在json中添加useComponents屬性

"usingComponents": {  "vas-prompt": "./components/toast/toast"}

wxml

<vas-toast id='toast'></vas-toast><button bindtap="showToast">點擊彈出toast</button>

//在onReady生命周期函數中，先獲取prompt實例onReady:function(){  this.prompt = this.selectComponent("#toast");},showToast:function(){  this.toast.showToast({   type: 'success',   title: '測試彈出消息',   duration: 1000,   compelete: function () {    console.log('toast框隱藏之后，會調用該函數')    //例如：跳轉頁面wx.navigateTo({ url: 'xxx' });   }  })},

效果