直线进度条

Posted 2020-11-19 chenmiaosong

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}