微信小程序 - 实现带滑块的进度条

  应微信小程序项目需求，要实现一个带滑块并可左右滑动的进度条，看了小程序的文档，发现上面的progress组件无法满足需求，所以我自己写了一个，在这里总结一下。

一、效果图

二、实现逻辑

功能实现的逻辑比较简单，这里简单说明一下：

1. 首先用一个标签将相关代码包裹起来，加上静态定位；
2. 画两条一模一样的线条，其中一条加上相对定位改变线条的颜色，动态设置它的宽度；
3. 画一个滑块，使用相对定位定到线条上面，给它加bindtouchmove事件，获取它距离左边的宽度，然后对应设置上去即可。

三、相关代码

1、wxml文件

<view class="process_wrap">
  <view class="line" bindtap="moveTo"></view>
  <!-- 这里的宽度和left值也可以改成百分比，效果是一样的 -->
  <view class="active_line" style="width:{
       {
       2*progress}}rpx;