开发时候发现小程序端没有太不便顺滑一些的双向选择器 所以封装了一个简略的插件
<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…