开发时候发现小程序端没有太不便顺滑一些的双向选择器 所以封装了一个简略的插件
<view class='sliderView' id="slider"> <movable-area class="slider_warp"> <view class="slider_line"></view> <view class="slider_line_top" style="left:{{_sliderLineLeft}}px;width:{{_sliderLineWidth}}px" ></view> <movable-view class="left" direction="horizontal" x="{{_sliderMinLeft}}" animation="{{!enAnimation}}" bindchange="sliderChange" data-type="min" ></movable-view> <movable-view class="right" direction="horizontal" x="{{_sliderMaxLeft}}" animation="{{!enAnimation}}" bindchange="sliderChange" data-type="max" ></movable-view> </movable-area></view>js
Component({ properties: { _sliderCurrValue: { type: Array, value: [0, 60000] }, _sliderLimitValue: { type: Array, value: [0, 600000] }, _sliderStep:Number }, data: { _sliderMinLeft: 0,//滑块理论显示地位 _sliderMaxLeft: 340 - 26,//滑块理论显示地位 _slider: [0, 340 - 26],//slider的最大理论范畴和最小理论范畴 }, attached(){ this.initSlider() }, methods: { mySet(data,log=false){ this.setData(data) if(!log) return clearTimeout(this.setLog) this.setLog=setTimeout(_=>{ console.log(...Object.keys(data),this.data) },500) }, initSlider() { if (this.data._sliderLimitValue[0] == this.data._sliderLimitValue[1]){ throw new Error('极限最大值和最小值不能相等') } //防止除不尽问题初始化时不传出挪动后的值 this.emitChange() this.mySet({enAnimation: true}) this.calculateLeft() setTimeout(_=>{ this.mySet({enAnimation: false}) },300) // this.emitChange() }, calculateLeft() {//依据内部带入的以后值计算滑块地位 console.log(this.data._sliderCurrValue) if (this.data._sliderCurrValue[0]==undefined||this.data._sliderCurrValue[1]==undefined){ throw new Error('带入的值不残缺') } let value = this.data._sliderCurrValue this.mySet({ _sliderMinLeft: this.conversionValue(value[0], true), _sliderMaxLeft: this.conversionValue(value[1], true) }) this.calculateLine() }, calculateLineLeft() { return this.data._sliderMinLeft < this.data._sliderMaxLeft }, calculateLine() {//计算线 let _sliderLineLeft = this.calculateLineLeft() ? this.data._sliderMinLeft : this.data._sliderMaxLeft; let _sliderLineWidth = Math.abs(this.data._sliderMaxLeft - this.data._sliderMinLeft) this.mySet({ _sliderLineLeft: _sliderLineLeft + 13, _sliderLineWidth }) }, conversionValue(value, type) {//带入值和滑块left之间转换 let romValue = (this.data._slider[1] - this.data._slider[0]) let coverValue = (this.data._sliderLimitValue[1] - this.data._sliderLimitValue[0]) return type ? (romValue / coverValue * value) : Math.round(coverValue / romValue * value) }, emitChange() { if(this.data.enAnimation) return this.triggerEvent('change',{value:this.data._sliderCurrValue}) }, sliderChange(e) {//滑动小值滑块 const left = e.detail.x; const type=e.currentTarget.dataset.type if(type=='min'){ this.data._sliderMinLeft = left; }else{ this.data._sliderMaxLeft = left; } this.calculateLine(); if (type=='min'?this.calculateLineLeft():!this.calculateLineLeft()) { this.data._sliderCurrValue[0] = this.conversionValue(left, false) } else { this.data._sliderCurrValue[1] = this.conversionValue(left, false) } this.emitChange() // this.mySet({_sliderCurrValue:this.data._sliderCurrValue}) }, }})代码地址：https://github.com/wnagchi/we...