微信小程序自定义toast组件的方法详解【含动画】

<!-- 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)  } }})

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

/* 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;}

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

<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' });   }  })},