小程序模拟纵向进度条

朱雀 2022-05-10 23:12 238阅读 0赞

效果图:![70][]

WXML:
    
    <view id="wrapper2">
        <view id="progressbar2"></view>
          <view  id="fill2" style="width:{
       {view2.Width}}px;height:{
       {view2.Height}}px;top:{
       {top}}px;">
            <view class='fltent2' style="line-height:{
       {linheight}}px;height:{
       {view2.Height}}px;" id='mjltest'>
              {
       {count3}}%
            </view>
          </view>
      </view>
    </view>
    
    index.js:
    
    // pages/test/test.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        linheight:20,//行高
        top:197,
        view2: {
          Width: 22,
          Height: 20
        },
        count3:0,//进度条百分比
        timer3: ''//定时器名字
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
        this.bb();
      },
     
      bb: function () {
        var that = this;
        var top=that.data.top;//获取动态的top定位
        var count2 = that.data.count3;//获取倒计时初始值
        var count = that.data.view2.Height;//获取倒计时初始值
        //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
        that.setData({
          timer3: setInterval(function () {//这里把setInterval赋值给变量名为timer2的变量
            count++;
            count2++;
            top--;
            // 获取元素高度
            //创建节点选择器
            var query = wx.createSelectorQuery();
            //选择id
            query.select('#mjltest').boundingClientRect()
            query.exec(function (res) {
              //res就是 所有标签为mjltest的元素的信息 的数组
              console.log('获取节点信息', res);
              //取高度
              console.log('打印元素高度', res[0].height);
              that.setData({
                linheight: res[0].height
              })
            })
            that.setData({  
              view2: {
                Width: 22,
                Height: count
              },
              count3: count2,
              top:top
            })
            //在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
            if (count == 100) {
              //这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
              //因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
              clearInterval(that.data.timer3);
              //关闭定时器之后，可作其他处理codes go here
            }
          }, 1000)
        })
      },
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })
    
    
    WXSS:
    
    #wrapper2{
        position: relative;
        width:100px;
        height:230px;
        border:1px solid darkgray;
        margin-bottom: 50px;
    }
    #progressbar2{
        position: absolute;
        top:15px;
        left:30px;
        width:20px;
        height:200px;
        border:1px solid darkgray;
        border-radius: 10px;
    }
    #fill2{
      position: absolute;left: 30px;
      background-color: #6caf00;
      border-radius: 10px;
      transform:rotate(180deg);
    }
    .fltent2{
      transform:rotate(180deg);
      font-size: 12px;
      text-align: center;
      height: 100%; 
    }

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[70]: /images/20220511/06edba900a204f669e3ecb7d2789ba52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220511/fa568ff3e8214f97b7353901de6e0c42.png