微信小程序自定义toast组件的方法详解【含动画】
作者：zhy前端攻城狮
这篇文章主要介绍了微信小程序自定义toast组件的方法,结合实例形式详细分析了微信小程序自定义toast组件的步骤、实现方法及相关操作技巧,需要的朋友可以参考下
本文实例讲述了微信小程序自定义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>
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">点击弹出toast</button>
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' });
}
})
},
效果
希望本文所述对大家微信小程序开发有所帮助。