【微信小程序】自定義組件--手指跟隨滑動的進度條

先上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