⼩程序⾃定义实现toast进度百分⽐动画组件⼩程序⾃定义实现toast进度百分⽐动画组件
⽬录结构
wxml
<view class='wx-toast-box' animation="{{animationData}}">
<view class='wx-toast-content'>
<view class="progress">{{number}}</view>
<view class="img_box">
<image class="circle " src="../../../image/loading.png" ></image>
</view>
<view class='wx-toast-toast anima_position'>{{ content }}</view>
</view>
</view>
搭建组件结构
js
options:{
multipleSlots:true// 在组件定义时的选项中启⽤多slot⽀持},
/**
* 私有数据，组件的初始数据
* 可⽤于模版渲染
*/
data:{// 弹窗显⽰控制
animationData:{},
content:'提⽰内容',
number:0,
level_box:-999,
},
/**
* 组件的⽅法列表
*/
methods:{
/
**
* 显⽰toast，定义动画
*/
numberChange(){
let _this =this
for(let i =0; i <101; i++){
(function(){
setTimeout(()=>{
_this.setData({
number: i +'%'
})
},100* i)
})()
}
},
showToast(val){
this.setData({
level_box:999
})
this.numberChange()
var animation = wx.createAnimation({
duration:300,
timingFunction:'ease',
})
this.animation = animation
animation.opacity(1).step()
this.setData({
animationData: port(),
content: val
})
/**
* 延时消失
*/
setTimeout(function(){
animation.opacity(0).step()
this.setData({
animationData: port()
})
}.bind(this),10000)
}
}
})
json
{
"component": true,
"usingComponents": {}
}
wxss
可以根据具体项⽬背景进⾏修改
.wx-toast-box {
display: flex;
width:100%;
justify-content: center;
position: fixed;
top:400rpx;
opacity:0;
}
.wx-toast-content {
max-width:80%;
border-radius:30rpx;
padding:30rpx;
background:rgba(0,0,0,0.6);
}
.wx-toast-toast {
height:100%;
width:100%;
color: #fff;
font-size:28rpx;
text-align: center;
}
.progress {
display: flex;
justify-content: center;
font-size:28rpx;
font-weight:700;
text-align:CENTER;
color: #07c160;
}
.img_box {
display: flex;
justify-content: center;
margin:20rpx 0;
}
@keyframes rotate {margin属性值可以为百分比
from{
transform:rotate(360deg)
}
to {
transform:rotate(0deg)
}
}
.circle {
animation:3s linear 0s normal none infinite rotate; }
@keyframes translateBox {
0%{
transform:translateX(0px)
}
50%{
transform:translateX(10px)
}
100%{
transform:translateX(0px)
}
}
.anima_position {
animation:3s linear 0s normal none infinite translateBox; }
效果截图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。