【微信小程序】自定义组件--跟随手指滑动的进度条

先上gif图

我们在做商城一类的小程序的时候，会遇到评价订单或者评价人员的需求。目前市面上常见的是对订单或则人员进行星级评价，如下图

如果我们要换一个实现方式，用拖动进度条来评价，要怎么做呢？
我们想，当手指触摸到滑块、移动滑块和抬起手指，微信小程序肯定会有相应的事件来记录或者捕捉。
根据文档我们可以查阅到这三个事件
1.touchstart 手指触摸动作开始
2.touchmove 手指触摸后移动
3.touchend 手指触摸动作结束
有了这三个事件，我们思路了。

我们可以在滑块这个view上设置这三个事件，当我们监听到手指在滑块上移动的时候，就可以动态的改变（通过setData）滑块的位置来实现滑块跟随手指移动的效果

以下是具体代码
index.wxml

<view class='progress-root-container'>
  <text class='text' style='color:{{color}};font-size:{{titlesize}};font-weight:{{fontWeight}}'>{{progressName}}</text>
  <view class='progress-max'></view>
  <view class='progress-current' style="width:{{2*progress}}rpx"></view>
  <text class='pencent-text'>{{progressText}}</text>
  <image class='slice-button' src='{{slideImg}}' catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd" style="left:{{2*buttonLeft}}rpx"/>
</view>

index.js

var startPoint;
const min = 80;
const max = 294;
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    currentProgress: {
      type: Number,
      value: 0
    },
    maxProgress: {
      type: Number,
      value: 10
    },
    canSlide: {
      type: Boolean,
      value: true
    },
    progressName:{
      type:String,
      value:""
    },
    slideImg:{
      type:String,
      value:"images/ic_slide_button_1.png"
    },
    titlesize:{
      type:String,
      value:"28rpx",
    },
    fontWeight:{
      type:Number,
      value:700,
    },
    color:{
      type: String,
      value: "#333333",
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    buttonLeft: 80,
    progress: 0,
    progressText: 0,
  },
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.setData({
        progressText: (this.properties.currentProgress).toFixed(1),
        buttonLeft: this.properties.currentProgress * (max - min) / this.properties.maxProgress + min,
        progress: this.properties.currentProgress * (max - min) / this.properties.maxProgress
      })
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    buttonStart: function(e) {
      startPoint = e.touches[0]
    },
    buttonMove: function(e) {
      if (!this.properties.canSlide) {
        return
      }
      var endPoint = e.touches[e.touches.length - 1]
      var translateX = endPoint.clientX - startPoint.clientX
      var translateY = endPoint.clientY - startPoint.clientY

      startPoint = endPoint;
      var buttonLeft = this.data.buttonLeft + translateX;
      if (buttonLeft > max) {
        return
      }
      if (buttonLeft < min) {
        return
      }
      console.log(buttonLeft)
      this.setData({
        // buttonTop: buttonTop,
        buttonLeft: buttonLeft,
        progress: buttonLeft - min,
        progressText: ((buttonLeft - min) / (max - min) * this.properties.maxProgress).toFixed(1)
        //
      })
    },
    buttonEnd: function(e) {

    },

    /**
     * 获取分数
     */
    getScore(){
      return this.data.progressText
    },

    setCurrentProgress(progress){
      this.setData({
        currentProgress:progress,
        progressText: (progress).toFixed(1),
        buttonLeft: progress * (max - min) / this.properties.maxProgress + min,
        progress: progress * (max - min) / this.properties.maxProgress
      })
    }
  }
})

index.wxss

/* 588rpx max 160rpx min */
.progress-root-container {
  display: flex;
  flex-direction: row;
  width: 710rpx;
  align-items: center;
  height: 68rpx;
}

.text {
  font-size: 28rpx;
  color: #333;
  position: absolute;
  left: 40rpx;
  font-weight: 700;
}

.progress-max {
  position: absolute;
  left: 192rpx;
  height: 24rpx;
  width: 428rpx;
  background: #d8d8d8;
  border-radius: 30rpx;
  z-index: 10;
}

.progress-current {
  position: absolute;
  left: 192rpx;
  height: 24rpx;
  width: 428rpx;
  background: #59B0FF;
  border-radius: 30rpx;
  z-index: 20;
}

.pencent-text {
  font-size: 28rpx;
  color: #59b0ff;
  left: 666rpx;
  position: absolute;
  z-index: 20;
}

.slice-button {
  left: 588rpx;
  width: 68rpx;
  height: 68rpx;
  position: absolute;
  z-index: 30;
}

组件的使用
在使用该组件的page下的index.json文件中引入该组件

然后在wxml中使用
想要获取评价的分数，可以在index.js中，通过getScore方法获取

end