关于javascript:小程序自定义滑块movablearea

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;}

html========================================

<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);  }})

成果：莫挨老子是拖动的节点，款式轻易写的