去网上找了圈可以手指拖动的滑竿来显示价格区间,奈何都是点击的,产品经理说不愿将就,没法,就只能给自己下手写一个来筛选价格。
1、确定杆上要有两个点。即价格区间的头和尾的价格分别为多少
2、每次滑动的最小步数,我们这是step=100
3、最大价格是多少
4、拖动原点返回当前的时间区间
手指按下的时候获取当前的横坐标
myRange.prototype.start = function (num, _this) {
var ev = ev || event;
if (num == 1) {
this.initX1 = ev.targetTouches[0].pageX;
} else {
this.initX2 = ev.targetTouches[0].pageX;
}
this.zIndex++;
$(_this).css('z-index', this.zIndex)
}
手指拖动,获取拖动的距离,并分别用disX保存起来
myRange.prototype.move = function (num) {
var ev = ev || event;
var moveX = ev.targetTouches[0].pageX;
if (moveX >= this.min && moveX <= this.max) {
if (num == 1) {
this.endX1 = moveX;
this.disX1 = (moveX - this.$lineOffsetLeft);
this.setLineWinth(1, 'move')
} else {
this.endX2 = moveX;
this.disX2 = (moveX - this.$lineOffsetLeft);
this.setLineWinth(2, 'move')
}
}
}
手指抬起,计算当前距离是否为step的倍数,如果不是进行计算并取整,(分不同情况,是哪个圆点以及圆点拖动方向)
myRange.prototype.end = function (num) {
if (num == 1) {
if ((this.endX1 - this.initX1) > 0) {//右, 向上取整
var v = (this.set.step - this.disX1 % this.set.step) + this.disX1;
v <= this.rangeWidth ? this.disX1 = v : this.disX1 = this.rangeWidth;
this.setLineWinth(1);
} else {//左, 向下取整
this.disX1 = (this.disX1 - this.disX1 % this.set.step);
this.setLineWinth(1);
}
} else {
if ((this.endX2 - this.initX2) > 0) {//右, 向上取整
var v = (this.set.step - this.disX2 % this.set.step) + this.disX2;
v <= this.rangeWidth ? this.disX2 = v : this.disX2 = this.rangeWidth;
this.setLineWinth(2);
} else {//左, 向下取整
this.disX2 = this.disX2 - (this.disX2 % this.set.step);
this.setLineWinth(2);
}
}
}
this.setLineWinth(2);为设置圆点和line位置的方法
如需要完整案例,可以到这里下载:https://github.com/slailcp/myRange/tree/master/range
效果图如下