小程序movable-area自定义滑块

记录一下用小程序组件movable-area编写的拖动砝码组件
wxml==============================================>

<view class="container">

<view class="page-body">
  <view class="page-section">
    <view class="page-section-title first">movable-view区域小于movable-area</view>
    <input type="text" value="{{val}}" bindblur="onBlur"></input>
    <movable-area id="area">
      <movable-view id="areaView" x="{{x}}" y="{{y}}" direction="horizontal" bindchange="onChange"><view>莫挨老子</view></movable-view>
    </movable-area>
  </view>
  <view bindtap="onAdd">加1</view>
  <view bindtap="onSub">减1</view>
</view>

</view>

js=======================================

Page({
  onShareAppMessage() {
    return {
      title: 'movable-view',
      path: 'page/component/pages/movable-view/movable-view'
    }
  },
  onLoad() {
    this.initDomX();
  },
  data: {
    x: 0, // x轴
    y: 0, // y轴
    val:60, // 输入框值
    min: 60, // 最小值
    max: 150, // 最大值
    areaVal: 90, // max - min
    domX:0, // 砝码的总长
  },
  initDomX() {
    let _this = this;
    const query = wx.createSelectorQuery();
    query.select('#area').boundingClientRect();
    query.select('#areaView').boundingClientRect();
    query.exec((res) => {
      _this.setData({
        domX: res[0].width - res[1].width
      })
    })
  },
  onChange(e) {
    let _this = this;
    this.setData({
      // 取整
      // val: Math.round(_this.data.min + (_this.data.areaVal * ((Math.round(e.detail.x / _this.data.domX * 10000) / 100)/100)))
      // 保留两位小数
      val: (_this.data.min + (_this.data.areaVal * ((e.detail.x / _this.data.domX * 10000) / 100) / 100)).toFixed(1)
    })
  },
  onBlur(e) {
    let _this = this;
    let val = e.detail.value - 0;
    this.setData({
      x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
      // val: val.toFixed(2)
    })
    console.log((_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)));
    // this.setData({
      // 取整
      // val: Math.round(e.detail.value),
      // x: Math.round(_this.data.domX * ((val - _this.data.min) / _this.data.areaVal))
      // 保留两位小数
      // val: val.toFixed(2),
      // x: _this.data.domX * ((val - _this.data.min) / _this.data.areaVal)
    // })
  },
  onAdd(e) {
    let _this = this;
    let val = (_this.data.val-0) + 1;
    console.log(val);
    this.setData({
      // val: val,
      x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
    })
  },
  onSub(e) {
    let _this = this;
    let val = (_this.data.val-0) - 1;
    this.setData({
      // val: val,
      x: (_this.data.domX * ((val - _this.data.min) / _this.data.areaVal)),
    })
    console.log(this.data.x);
  }
})

css===========================

movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100rpx;
  width: 1rpx;
  background: transparent;
  color: #fff;
  position: relative;
}

movable-view view {
  position: absolute;
  top: -40rpx;
  background: #799AF4;
  z-index: 10;
  /* height: 100%; */
  width: 150rpx;
  text-align: center;
}
movable-area {
  height: 30rpx;
  width: 500rpx;
  margin: 50rpx;
  background: linear-gradient(to right,#FFC025 33%, #56DBBD 33%, #56DBBD 66%,#FB8D82 66%,#FB8D82);
  /* overflow: hidden; */
}
input {
  margin: 0 auto;
  border: 1rpx solid #000;
  width: 150rpx;
  height: 50rpx;
  text-align: center;
}
.max {
  width: 600rpx;
  height: 600rpx;
}

.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}

.page-section:last-child{
  margin-bottom: 0;
}

.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

效果：