slider滑块组件

效果图
现在小程序的根目录下新建一个组件目录，并创建一个组件

wxml代码

<!--components/Slider/Slider.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>

wxss代码

/* components/Slider/Slider.wxss */
/* 588rpx max 160rpx min */
.progress-root-container {
  display: flex;
  flex-direction: row;
  width: 750rpx;
  align-items: center;
  height: 68rpx;
}
.text {
  font-size: 28rpx;
  color: #333;
  position: absolute;
  left: 40rpx;
  font-weight: 700;
}
.progress-max {
  position: absolute;
  left: 30rpx;
  height: 15rpx;
  width: 350rpx;
  background: #d8d8d8;
  border-radius: 15rpx;
  z-index: 10;
}
.progress-current {
  position: absolute;
  left: 30rpx;
  height: 15rpx;
  width: 350rpx;
  background: #59B0FF;
  border-radius: 15rpx;
  z-index: 20;
}
.pencent-text {
  font-size: 28rpx;
  color: #59b0ff;
  left: 440rpx;
  position: absolute;
  z-index: 20;
}
.slice-button {
  left: 396rpx;
  width: 68rpx;
  height: 68rpx;
  position: absolute;
  z-index: 30;
}

js代码

// components/Slider/Slider.js
var startPoint;
const min = 10;
const max = 185;
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:"https://zrqc.51dreaming.com/image/component/slice_button.png"
    },
    titlesize:{
      type:String,
      value:"28rpx",
    },
    fontWeight:{
      type:Number,
      value:700,
    },
    color:{
      type: String,
      value: "#333333",
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    buttonLeft: 0,
    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
      })
    }
  }
})

最后在pages页面中的json文件中引入组件名称就可以使用了


在wxml中写上插件名称，就可以使用组件了