zoukankan      html  css  js  c++  java
  • 微信小程序-进度条循环播放

    <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;
    }
     
  • 相关阅读:
    Canvas鼠标点击特效(富强、民主...)、收藏
    mysql实现当前行的值累加上一行的值
    HTML生成横向的PDF
    Java iText+FreeMarker生成PDF(HTML转PDF)
    HTML图片点击放大---关闭
    HTML页面通过JS跨域调用,子传父
    查询结果中出现行号(适用于按名次排序)
    在Nginx和Apache服务器配置https
    Rinetd 端口转发工具
    lsyncd使用中遇到的问题
  • 原文地址:https://www.cnblogs.com/lipuqing180906/p/9596401.html
Copyright © 2011-2022 走看看