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


    <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;
    }
     
  • 相关阅读:
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
    Mysql高手系列
  • 原文地址:https://www.cnblogs.com/lipuqing180906/p/9596401.html
Copyright © 2020-2023  润新知