小程序自定义长按说话进度条

虽然小程序有提供progress进度条，但在进度过程中停顿效果不好，所以自定义了一个

<view class="speaking">
    <view style="position:relative;width:686rpx;">
      <view class="currentsecond">
        <image src="/speak/imgs/wave.png"></image>
        <text>{{currentsecond}}"</text>
      </view>
      <!-- <progress percent="{{currentsecond}}" active stroke-width="28" duration="1" color="#0088FF" border-radius="14" active-mode="forwards"/> -->
      <view class="progress">
        <view class="currentprogress" style="width:{{currentprogress}}rpx"></view>
      </view>
      <text class="cantotal">60s</text>
    </view>
    <view class="remark">请长按说话</view>
    <view class="speakbtn {{touching?'touching':''}}" bindlongpress="speaking" bindtouchend="shutup" bindtouchstart="touch">
      <image src="/speak/imgs/whitemicrophone.png"></image>
    </view>
    <image class="closebtn" src="/speak/imgs/cha.png"></image>
  </view>

.speaking {
  padding: 64rpx 32rpx;
  background: #fff;
}

.currentsecond image {
  width: 20rpx;
  height: 26rpx;
  margin-left:26rpx;
  margin-right:18rpx;
}

.currentsecond {
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height:56rpx;
  align-items: center;
}
.cantotal{
  position:absolute;
  right:0;
  top:0;
  display: inline-block;
  height: 56rpx;
  line-height: 56rpx;
  color:#999;
  margin-right:20rpx;
  font-size: 28rpx;
}
.remark{
  font-size: 24rpx;
  color:#999;
  text-align: center;
  margin:54rpx 32rpx;
}
.speakbtn{
  width:128rpx;
  height: 128rpx;
  background:#0088FF;
  border-radius: 50%;
  margin:0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform .2s;
}
.touching{
  transform: scale(0.95);
  transition: transform .2s;
  box-shadow: 0 0 8rpx #bbb inset;
  border:2rpx solid #343434;
  box-sizing: border-box;
}
.speakbtn image{
  width:44rpx;
  height: 64rpx;
}
.closebtn{
  width:28rpx;
  height:28rpx;
  position: absolute;
  bottom:58rpx;
  left:88rpx;
}
.progress{
  background: #F5F5F5;
  height: 56rpx;
  border-radius: 28rpx;
  overflow: hidden;
}
.currentprogress{
  background:#0088FF;
  height: 100%;
}

data: {
    currentsecond: 0,
    timer: '',
    tempCurrentone: 0,
    tempCurrenttwo: 0,
    currentprogress: 0,
    touching:false
  },
  shutup() {
    clearInterval(this.data.timer)
    this.setData({
      currentsecond: 0,
      currentprogress: 0,
      tempCurrentone: 0,
      tempCurrenttwo: 0,
      touching: false
    })
  },
  touch(){
    this.setData({
      touching:true
    })
  },
  speaking() {
    this.data.timer = setInterval(() => {
      this.data.tempCurrentone = Number(this.data.tempCurrentone + 1 / 100)
      this.data.tempCurrenttwo = this.data.tempCurrentone
      this.setData({
        currentsecond: (Number(this.data.tempCurrenttwo)).toFixed(),
        currentprogress: this.data.tempCurrentone / 60 * 686
      })
    }, 10)
  },