直线进度条

Posted chenmiaosong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了直线进度条相关的知识,希望对你有一定的参考价值。

js

Page({
  data: {
    progressWidth: 0,
    progressTime: 60,
    mark: true,
    playPausetips: "开始"
  },
  playbtn() {
    let that = this;
    let mark = that.data.mark;
    if (mark) {
      that.timer = setInterval(that.run, 1000); //that.timer关键点
      wx.showToast({
        title: ‘开始‘,
      })
      that.setData({
        mark: false,
        playPausetips: "暂停"
      })
    } else {
      clearInterval(that.timer);
      wx.showToast({
        title: ‘暂停‘,
      })
      that.setData({
        mark: true,
        playPausetips: "开始"
      })
    }
  },
  run() {
    let that = this;
    let totalProgressTime = 60 //
    let progressWidth = that.data.progressWidth; //显示进度
    let progressTime = that.data.progressTime; //时间

    if (progressWidth === 100) {
      wx.showToast({
        title: ‘结束回调处理‘,
      })
      clearInterval(that.timer);
      that.setData({
        progressTime: totalProgressTime, //进度条需要总时间s
        progressWidth: 100, //进度100%
        progressTime: 60
      })
      return;
    }
    progressTime--;
    progressWidth = (totalProgressTime - progressTime) * (100 / 60)
    that.setData({
      progressWidth: progressWidth,
      progressTime: progressTime
    })
  }

})

wxml

<view class=‘out‘ style=‘margin-top:10px‘>
  <view class=‘in‘ style=‘width:{{progressWidth}}%‘></view> 
</view>
<view class=‘caozuo‘>
  <text>{{progressTime}}秒</text>
  <text bindtap=‘playbtn‘ data-change=‘1‘>{{playPausetips}}</text>
</view>

wxss

page{background: #fff;}
.out {margin-left:auto;margin-right:auto;width:250px;height:20px;border:1px solid red;border-radius:20px;overflow:hidden;}
.in {height:100%;background-color:red;}
.caozuo{font-size:14px;color:#333;margin-left:auto;margin-right:auto;width:250px;margin-top:10px;display: flex;justify-content:space-between}

 

以上是关于直线进度条的主要内容,如果未能解决你的问题,请参考以下文章

当片段视图加载是异步任务的一部分时,如何在片段加载之前显示进度条?

自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度?

在recyclerview片段Reandroid中屏幕旋转后进度条不显示

css Bootstrap 3进度条片段

进度条不隐藏是当数据在片段中的recyclerview中加载时

用于 onActivityCreated 中通用图像加载器的片段中进度条的 NullPointerException