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

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:57:15

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

微信小程序自定義toast組件的方法詳解【含動(dòng)畫】:本文實(shí)例講述了微信小程序自定義toast組件的方法。分享給大家供大家參考，具體如下：怎么創(chuàng)建就不說了，前面一篇有微信小程序自定義prompt組件直接上代碼 wxml  <view class=t

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序自定義toast組件的方法詳解【含動(dòng)畫】:本文實(shí)例講述了微信小程序自定義toast組件的方法。分享給大家供大家參考，具體如下：怎么創(chuàng)建就不說了，前面一篇有微信小程序自定義prompt組件直接上代碼 wxml  <view class=t

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

怎么創(chuàng)建就不說了，前面一篇有
微信小程序自定義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.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需要先設(shè)置為block之后，才能執(zhí)行動(dòng)畫
 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">點(diǎn)擊彈出toast</button>

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

效果