微信小程序自定义toast组件(含动画)

怎么创建就不说了，上一篇有
微信小程序自定义prompt组件
直接上代码
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>

js

// components/toast/toast.js
Component({
  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">点击弹出toastbutton>

js

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

效果