微信小程序-进度条循环播放

<progress class='progressPercent' percent="{{showPercentProgress}}" stroke-width='2' />
 
 
js
// pages/startPage/startPage.js
const app =getApp();

let Bmob = require('../../../utils_global/Bmob-1.1.1.min.js');
var util = require('../../../utils_global/util.js');
util.init(app);

Page({
/**
* 页面的初始数据
*/
data: {
TopTips: '',
showTopTips: false,
tipsType:'',
showPercentProgress:0,
currentTime:2, //计时器
},

showTopTips: function (strTopTips, tipsType) {
let tmpTipsType = '';
tmpTipsType = tipsType ? tipsType :"warn"
var that = this;

this.setData({
showTopTips: true,
TopTips: strTopTips,
TipsType: tmpTipsType
});
console.log(this.data.TipsType)
setTimeout(function () {
that.setData({
showTopTips: false
});
}, 1500);
},

/**
* 生命周期函数--监听页面加载
*/

onLoad: function (options) {
console.log("onLoad",options);
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},

onShow: function () {
let that = this
let shfit = -3000/200;
that.data.showPercentProgress = 0;
var myProInterval = setInterval(function () {
if (that.data.showPercentProgress >= 100) {
shfit = shfit* -1
}
if (that.data.showPercentProgress == 0) {
shfit = shfit * -1
}
that.data.showPercentProgress += shfit;
if (that.data.showPercentProgress<0){
that.data.showPercentProgres=0
}
if (that.data.showPercentProgres>100){
that.data.showPercentProgres = 100
}
that.setData({
showPercentProgress: that.data.showPercentProgress
})
}, 200)

Bmob.User.auth().then(function (obj) {
// 倒计时
let currentTime = that.data.currentTime
var myInterval = setInterval(function () {
currentTime--;
that.setData({
currentTime: currentTime
})
if (currentTime <= 0) {
clearInterval(myInterval)
let tmpUserInfo = wx.getStorageSync('currentUser')
let typeOfTmp = typeof tmpUserInfo
if (typeOfTmp.toLowerCase() === 'object' && tmpUserInfo.igUserInfo.mobilePhoneNumber) {
//已手机认证用户
app.globalData.currentUser = tmpUserInfo
app.globalData.currentUser.bmobUserinfo.objectId = Bmob.User.current().objectId
app.globalData.currentUser.bmobUserinfo.openid = Bmob.User.current().authData.weapp.openid
app.globalData.currentUser.bmobUserinfo.session_key = Bmob.User.current().authData.weapp.session_key
app.loadAppConfigDataFromCloud().then(res=>{
console.log(123)
app.myRoute(app.globalData.onShowOption);
})
// 进度结束 给点延迟
clearInterval(myProInterval);
} else {//未手机认证用户
app.globalData.currentUser.bmobUserinfo.objectId = Bmob.User.current().objectId
app.globalData.currentUser.bmobUserinfo.openid = Bmob.User.current().authData.weapp.openid
app.globalData.currentUser.bmobUserinfo.session_key = Bmob.User.current().authData.weapp.session_key
wx.navigateTo({
url: '../../pages_login/login_tel/login_tel',
})
}
}
}, 1000)
},function (err) {
this.showTopTips('数据加载失败,', err)
});
}
})
 
 
wxss
 
page{
background: #fff;
position: fixed;
100%;
bottom: 0;
}
.fatherView{
100%;
height: 100%;
flex-wrap: wrap;
justify-content: center;
}
.start_top_image{
100%;
height:78%;
position: fixed;
bottom: 22%;
}
.start_btm_view{
100%;
height: 264rpx;
display:flex;
flex-direction:column;
align-items:center;/*垂直居中*/
justify-content: center;/*水平居中*/
position: fixed;
bottom: 0;
}
.start_btm_vCent{
100%;
display:flex;
flex-wrap:nowrap;
align-items:center;/*垂直居中*/
justify-content: center;/*水平居中*/
}
.img{
100%;
height:940rpx;
position: fixed;
bottom: 22%;
}
.progressPercent{
750rpx;
position: fixed;
bottom: 22%;
margin-top: -8rpx;
}
.logo{
height:90rpx;
90rpx;
}
.jump{
position: fixed;
height: 73rpx;
125rpx;
right: 30rpx;
}
 
原文地址:https://www.cnblogs.com/lipuqing180906/p/9596401.html