|
|
|
// component/zyslider/zyslider.js
|
|
|
|
var util = require('../../utils/util')
|
|
|
|
Component({
|
|
|
|
/**
|
|
|
|
* 组件的属性列表
|
|
|
|
*/
|
|
|
|
properties: {
|
|
|
|
/** slider 最小值 */
|
|
|
|
min: {
|
|
|
|
type: Number
|
|
|
|
},
|
|
|
|
/** slider 最大值 */
|
|
|
|
max: {
|
|
|
|
type: Number
|
|
|
|
},
|
|
|
|
/** 步进 （没做，有时间再说，项目里没用到撒） */
|
|
|
|
step: {
|
|
|
|
type: Number
|
|
|
|
},
|
|
|
|
/** 预选选择的小值*/
|
|
|
|
minValue: {
|
|
|
|
type: Number
|
|
|
|
},
|
|
|
|
/** 预选选择的大值 */
|
|
|
|
maxValue: {
|
|
|
|
type: Number
|
|
|
|
},
|
|
|
|
/** 滑块颜色 */
|
|
|
|
blockColor:{
|
|
|
|
type: String
|
|
|
|
},
|
|
|
|
/** 未选择进度条颜色 */
|
|
|
|
backgroundColor:{
|
|
|
|
type: String
|
|
|
|
},
|
|
|
|
/** 已选择进度条颜色 */
|
|
|
|
selectedColor:{
|
|
|
|
type: String
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 组件的初始数据
|
|
|
|
*/
|
|
|
|
data: {
|
|
|
|
min: 0,
|
|
|
|
max: 300,
|
|
|
|
leftValue: 0,
|
|
|
|
rightValue: 300,
|
|
|
|
totalLength: 0,
|
|
|
|
bigLength: 0,
|
|
|
|
ratio: 0.5,
|
|
|
|
sliderLength: 30,
|
|
|
|
containerLeft: 0, //标识整个组件，距离屏幕左边的距离
|
|
|
|
hideOption: '', //初始状态为显示组件
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 组件的方法列表
|
|
|
|
*/
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 设置左边滑块的值
|
|
|
|
*/
|
|
|
|
_propertyLeftValueChange: function () {
|
|
|
|
|
|
|
|
let minValue = this.data.minValue / this.data.max * this.data.bigLength
|
|
|
|
let min = this.data.min / this.data.max * this.data.bigLength
|
|
|
|
this.setData({
|
|
|
|
leftValue: minValue - min
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 设置右边滑块的值
|
|
|
|
*/
|
|
|
|
_propertyRightValueChange: function () {
|
|
|
|
let right = this.data.maxValue / this.data.max * this.data.bigLength + this.data.sliderLength
|
|
|
|
this.setData({
|
|
|
|
rightValue: right
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 滑块滑动
|
|
|
|
* @param e
|
|
|
|
*/
|
|
|
|
sliderMove(e){
|
|
|
|
this.sliderEvent=e
|
|
|
|
//console.log('sliderMove.changing',this.sliderMoving)
|
|
|
|
if(this.sliderMoving) return;//移动中
|
|
|
|
setTimeout(()=>{
|
|
|
|
//console.log('changing',this.sliderEvent);
|
|
|
|
let pagex = this.sliderEvent.changedTouches[0].pageX / this.data.ratio - this.data.containerLeft - this.data.sliderLength / 2
|
|
|
|
let myEventDetail={}
|
|
|
|
if(util.attr(this.sliderEvent,'type')=='max'){
|
|
|
|
if (pagex <= this.data.leftValue + this.data.sliderLength) {
|
|
|
|
pagex = this.data.leftValue + this.data.sliderLength
|
|
|
|
} else if (pagex >= this.data.totalLength - this.data.sliderLength) {
|
|
|
|
pagex = this.data.totalLength - this.data.sliderLength
|
|
|
|
}
|
|
|
|
this.setData({
|
|
|
|
rightValue: pagex
|
|
|
|
})
|
|
|
|
pagex = pagex - this.data.sliderLength
|
|
|
|
let heighValue = parseInt(pagex / this.data.bigLength * (this.data.max - this.data.min) + this.data.min)
|
|
|
|
|
|
|
|
myEventDetail = { type:'max',value: heighValue }
|
|
|
|
}else{
|
|
|
|
if (pagex + this.data.sliderLength >= this.data.rightValue) {
|
|
|
|
pagex = this.data.rightValue - this.data.sliderLength
|
|
|
|
} else if (pagex <= 0) {
|
|
|
|
pagex = 0
|
|
|
|
}
|
|
|
|
this.setData({
|
|
|
|
leftValue: pagex
|
|
|
|
})
|
|
|
|
let lowValue = parseInt(pagex / this.data.bigLength * parseInt(this.data.max - this.data.min) + this.data.min)
|
|
|
|
myEventDetail = { type:'min',value: lowValue }
|
|
|
|
}
|
|
|
|
//console.log('event',myEventDetail);
|
|
|
|
this.triggerEvent('event', myEventDetail)
|
|
|
|
this.sliderMoving=false
|
|
|
|
},0)
|
|
|
|
this.sliderMoving=true
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 隐藏组件
|
|
|
|
*/
|
|
|
|
hide: function () {
|
|
|
|
this.setData({
|
|
|
|
hideOption: 'hide',
|
|
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 显示组件
|
|
|
|
*/
|
|
|
|
show: function () {
|
|
|
|
this.setData({
|
|
|
|
hideOption: '',
|
|
|
|
})
|
|
|
|
},
|
|
|
|
/**
|
|
|
|
* 重置
|
|
|
|
*/
|
|
|
|
reset: function () {
|
|
|
|
this.setData({
|
|
|
|
rightValue: this.data.totalLength,
|
|
|
|
leftValue: 0,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
changeVal(min,max) {
|
|
|
|
this.setData({
|
|
|
|
minValue: parseInt(min),
|
|
|
|
maxValue: parseInt(max),
|
|
|
|
})
|
|
|
|
this._propertyLeftValueChange()
|
|
|
|
this._propertyRightValueChange()
|
|
|
|
this.triggerEvent('event', { type:'once',min:min,max:max})
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
ready: function () {
|
|
|
|
let that = this;
|
|
|
|
const getSystemInfo = util.wxPromisify(wx.getSystemInfo)
|
|
|
|
const queryContainer = util.wxPromisify(wx.createSelectorQuery().in(this).select(".container").boundingClientRect)
|
|
|
|
util.wxPromisify(wx.getSystemInfo)()
|
|
|
|
.then(res => {
|
|
|
|
let ratio = res.windowWidth / 750
|
|
|
|
that.setData({
|
|
|
|
ratio: ratio,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.then(() => {
|
|
|
|
var query = wx.createSelectorQuery().in(this)
|
|
|
|
query.select(".container").boundingClientRect(function (res) {
|
|
|
|
that.setData({
|
|
|
|
totalLength: res.width / that.data.ratio - that.data.sliderLength,
|
|
|
|
bigLength: res.width / that.data.ratio - that.data.sliderLength * 3,
|
|
|
|
rightValue: res.width / that.data.ratio - that.data.sliderLength,
|
|
|
|
containerLeft: res.left / that.data.ratio
|
|
|
|
})
|
|
|
|
|
|
|
|
/**
|
|
|
|
* 设置初始滑块位置
|
|
|
|
*/
|
|
|
|
that._propertyLeftValueChange()
|
|
|
|
that._propertyRightValueChange()
|
|
|
|
}).exec()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}) |
...
|
...
|
|
