392 lines
9.5 KiB
Vue
392 lines
9.5 KiB
Vue
<template>
|
||
<view class="range-slider" :style="'width:' + width + 'rpx;height:' + height + 'rpx'">
|
||
<view class="range-bar" :style="'width:100%;height:' + barHeight + 'rpx'">
|
||
<view class="range-bar-bg" :style="'background-color:' + backgroundColor + ''"></view>
|
||
<view class="range-bar-progress" :style="'margin-left:' + progressBarLeft + 'rpx;width:' + progressBarWidth + 'rpx;background-color:' + activeColor + ''"></view>
|
||
</view>
|
||
|
||
<view
|
||
class="block"
|
||
:class="{ active: isMinActive }"
|
||
:style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + minBlockLeft + 'rpx;'"
|
||
@touchstart="_onBlockTouchStart"
|
||
@touchmove.stop="_onBlockTouchMove"
|
||
@touchend="_onBlockTouchEnd"
|
||
:data-left="minBlockLeft"
|
||
data-tag="minBlock"
|
||
>
|
||
<slot name="minBlock"></slot>
|
||
</view>
|
||
<view
|
||
class="block"
|
||
:class="{ active: isMaxActive }"
|
||
:style="'width:' + blockSize + 'rpx;height:' + blockSize + 'rpx;margin-left:' + maxBlockLeft + 'rpx;'"
|
||
@touchstart="_onBlockTouchStart"
|
||
@touchmove.stop="_onBlockTouchMove"
|
||
@touchend="_onBlockTouchEnd"
|
||
:data-left="maxBlockLeft"
|
||
data-tag="maxBlock"
|
||
>
|
||
<slot name="maxBlock"></slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
/**
|
||
* range-slider v1.0.6
|
||
*/
|
||
const _windowWidth = uni.getSystemInfoSync().windowWidth;
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isMinActive: false,
|
||
isMaxActive: false,
|
||
|
||
//#ifdef H5
|
||
MAX_LENGTH: 294,
|
||
maxBlockLeft: 300,
|
||
//#endif
|
||
|
||
// #ifndef H5
|
||
MAX_LENGTH: 700,
|
||
maxBlockLeft: 350,
|
||
// #endif
|
||
|
||
minBlockLeft: 0,
|
||
progressBarLeft: 0,
|
||
progressBarWidth: 350,
|
||
|
||
originalMinValue: 0,
|
||
originalMaxValue: 0
|
||
};
|
||
},
|
||
components: {},
|
||
props: {
|
||
//组件宽度
|
||
width: {
|
||
type: Number,
|
||
default: 750
|
||
},
|
||
//组件高度
|
||
height: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
//滑块大小
|
||
blockSize: {
|
||
type: Number,
|
||
default: 50
|
||
},
|
||
//区间进度条高度
|
||
barHeight: {
|
||
type: Number,
|
||
default: 5
|
||
},
|
||
//背景条颜色
|
||
backgroundColor: {
|
||
type: String,
|
||
default: '#e9e9e9'
|
||
},
|
||
//已选择的颜色
|
||
activeColor: {
|
||
type: String,
|
||
default: '#1aad19'
|
||
},
|
||
//最小值
|
||
min: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
//最大值
|
||
max: {
|
||
type: Number,
|
||
default: 100
|
||
},
|
||
//设置初始值
|
||
values: {
|
||
type: Array,
|
||
default: function() {
|
||
return [0, 100];
|
||
}
|
||
},
|
||
//步长值
|
||
step: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
//live模式，是否动态更新
|
||
liveMode: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
},
|
||
created: function() {
|
||
//使用自定义组件编译模式时，支持生命周期为：created
|
||
this._refresh();
|
||
},
|
||
onLoad: function(option) {
|
||
//不使用自定义组件编译模式时，支持生命周期为：onload
|
||
this._refresh();
|
||
},
|
||
onUnload: function() {},
|
||
watch: {
|
||
//组件宽度
|
||
width: function(newVal, oldVal, changedPath) {
|
||
var that = this;
|
||
if (newVal != that.width) {
|
||
this._refresh();
|
||
}
|
||
},
|
||
//滑块大小
|
||
blockSize: function(newVal, oldVal, changedPath) {
|
||
var that = this;
|
||
if (newVal != that.blockSize) {
|
||
this._refresh();
|
||
}
|
||
},
|
||
//最小值
|
||
min: function(newVal, oldVal, changedPath) {
|
||
var that = this;
|
||
if (newVal != that.min) {
|
||
that._refresh();
|
||
}
|
||
},
|
||
//最大值
|
||
max: function(newVal, oldVal, changedPath) {
|
||
var that = this;
|
||
if (newVal != that.max) {
|
||
that._refresh();
|
||
}
|
||
},
|
||
//设置初始值
|
||
values: function(newVal, oldVal, changedPath) {
|
||
var that = this;
|
||
var values = that.values;
|
||
console.log('refresh', newVal, oldVal);
|
||
if (that._isValuesValid(newVal) && that._isValuesValid(values)) {
|
||
if (values[0] != oldVal[0] || values[1] != oldVal[1]) that._refresh();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
//补0
|
||
_pad: function(num, n) {
|
||
return Array(n - ('' + num).length + 1).join(0) + num;
|
||
},
|
||
_pxToRpx: function(px) {
|
||
return (750 * px) / _windowWidth;
|
||
},
|
||
_onBlockTouchStart: function(e) {
|
||
let tag = e.target.dataset.tag;
|
||
if (tag == 'minBlock' || tag == 'maxBlock') {
|
||
this.isMinActive = tag == 'minBlock';
|
||
this.isMaxActive = tag == 'maxBlock';
|
||
|
||
//兼容h5平台及某版本微信
|
||
if (e.hasOwnProperty('changedTouches')) {
|
||
this._blockDownX = e.changedTouches[0].pageX;
|
||
} else {
|
||
this._blockDownX = e.pageX;
|
||
}
|
||
|
||
//#ifdef H5
|
||
this._blockLeft = parseFloat(e.target.dataset.left);
|
||
//#endif
|
||
// #ifndef H5
|
||
this._blockLeft = e.target.dataset.left;
|
||
// #endif
|
||
|
||
this._curBlock = e.target.dataset.tag;
|
||
}
|
||
},
|
||
_onBlockTouchMove: function(e) {
|
||
let tag = e.target.dataset.tag;
|
||
if (tag == 'minBlock' || tag == 'maxBlock') {
|
||
var that = this;
|
||
var values = that._calculateValues(e);
|
||
that._refreshProgressBar(values[2], values[3]);
|
||
that._refreshBlock(values[2], values[3]);
|
||
//拖动时也触发事件
|
||
var eventDetail = {
|
||
minValue: this.formatNumber(values[0], this.step),
|
||
maxValue: this.formatNumber(values[1], this.step),
|
||
fromUser: true,
|
||
originalValue: {
|
||
minValue: values[0],
|
||
maxValue: values[1]
|
||
}
|
||
};
|
||
|
||
this.originalMinValue = values[0];
|
||
this.originalMaxValue = values[1];
|
||
var eventOption = {};
|
||
//
|
||
if (this.liveMode) that.$emit('rangechange', eventDetail, eventOption);
|
||
}
|
||
},
|
||
_onBlockTouchEnd: function(e) {
|
||
let tag = e.target.dataset.tag;
|
||
this.isMinActive = false;
|
||
this.isMaxActive = false;
|
||
if (tag == 'minBlock' || tag == 'maxBlock') {
|
||
var that = this;
|
||
var values = that._calculateValues(e.mp.changedTouches[0]);
|
||
that._refreshProgressBar(values[2], values[3]);
|
||
that._refreshBlock(values[2], values[3]);
|
||
var eventDetail = {
|
||
minValue: this.formatNumber(values[0], this.step),
|
||
maxValue: this.formatNumber(values[1], this.step),
|
||
fromUser: true,
|
||
originalValue: {
|
||
minValue: values[0],
|
||
maxValue: values[1]
|
||
}
|
||
};
|
||
this.originalMinValue = values[0];
|
||
this.originalMaxValue = values[1];
|
||
var eventOption = {};
|
||
that.$emit('rangechange', eventDetail, eventOption);
|
||
}
|
||
},
|
||
_isValuesValid: function(values) {
|
||
return values != null && values != undefined && values.length == 2;
|
||
},
|
||
/**
|
||
* 根据手势计算相关数据
|
||
*/
|
||
_calculateValues: function(e) {
|
||
var pageX = e.pageX;
|
||
//兼容h5平台
|
||
if (e.hasOwnProperty('changedTouches')) {
|
||
pageX = e.changedTouches[0].pageX;
|
||
}
|
||
|
||
var that = this;
|
||
var moveLength = pageX - that._blockDownX;
|
||
var left = that._blockLeft + that._pxToRpx(moveLength);
|
||
left = Math.max(0, left);
|
||
left = Math.min(left, that.MAX_LENGTH);
|
||
var minBlockLeft = that.minBlockLeft;
|
||
var maxBlockLeft = that.maxBlockLeft;
|
||
if (that._curBlock == 'minBlock') {
|
||
minBlockLeft = left;
|
||
} else {
|
||
maxBlockLeft = left;
|
||
}
|
||
var range = that.max - that.min;
|
||
var minLeft = Math.min(minBlockLeft, maxBlockLeft);
|
||
var maxLeft = Math.max(minBlockLeft, maxBlockLeft);
|
||
var minValue = (minLeft / that.MAX_LENGTH) * range + that.min;
|
||
var maxValue = (maxLeft / that.MAX_LENGTH) * range + that.min;
|
||
return [minValue, maxValue, minLeft, maxLeft];
|
||
},
|
||
/**
|
||
* 计算滑块坐标
|
||
*/
|
||
_calculateBlockLeft: function(minValue, maxValue) {
|
||
var that = this;
|
||
var blockSize = that.blockSize;
|
||
var range = that.max - that.min;
|
||
var minLeft = ((minValue - that.min) / range) * that.MAX_LENGTH;
|
||
var maxLeft = ((maxValue - that.min) / range) * that.MAX_LENGTH;
|
||
return [minLeft, maxLeft];
|
||
},
|
||
/**
|
||
* 刷新进度条视图
|
||
*/
|
||
_refreshProgressBar: function(minBlockLeft, maxBlockLeft) {
|
||
var that = this;
|
||
var blockSize = that.blockSize;
|
||
that.progressBarLeft = minBlockLeft + blockSize / 2;
|
||
that.progressBarWidth = Math.abs(maxBlockLeft - minBlockLeft);
|
||
},
|
||
/**
|
||
* 刷新滑块视图
|
||
*/
|
||
_refreshBlock: function(minBlockLeft, maxBlockLeft) {
|
||
var that = this;
|
||
that.minBlockLeft = minBlockLeft;
|
||
that.maxBlockLeft = maxBlockLeft;
|
||
},
|
||
/**
|
||
* 刷新整个视图
|
||
*/
|
||
_refresh: function() {
|
||
var that = this;
|
||
var MAX_LENGTH = that.width - that.blockSize;
|
||
that.MAX_LENGTH = MAX_LENGTH;
|
||
that.maxBlockLeft = MAX_LENGTH;
|
||
that.progressBarWidth = MAX_LENGTH;
|
||
var values = that.values;
|
||
if (this.originalMinValue && this.originalMinValue) {
|
||
values = [this.originalMinValue || values[0], this.originalMaxValue || values[1]];
|
||
}
|
||
|
||
if (that._isValuesValid(values)) {
|
||
values[0] = Math.max(that.min, values[0]);
|
||
values[0] = Math.min(values[0], that.max);
|
||
values[1] = Math.max(that.min, values[1]);
|
||
values[1] = Math.min(values[1], that.max);
|
||
var leftValues = that._calculateBlockLeft(values[0], values[1]);
|
||
that._refreshProgressBar(leftValues[0], leftValues[1]);
|
||
that._refreshBlock(leftValues[0], leftValues[1]);
|
||
}
|
||
},
|
||
formatNumber(num, step) {
|
||
//格式化数字，保留几位小数
|
||
let stepStr = '' + step;
|
||
let index = stepStr.indexOf('.');
|
||
let len = index > -1 ? stepStr.length - index - 1 : 0;
|
||
let offestNum = parseInt(1 + Array(('' + len).length + 1).join(0)) * 0.1;
|
||
let tmpNum = num * offestNum;
|
||
return ((parseInt(tmpNum / step + (step > 1 ? 1 : step) * 0.5) * step) / offestNum).toFixed(len);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.range-slider {
|
||
position: relative;
|
||
}
|
||
|
||
.range-bar {
|
||
position: absolute;
|
||
}
|
||
|
||
.range-bar {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translate(0, -50%);
|
||
border-radius: 10000rpx;
|
||
}
|
||
|
||
.range-bar-bg {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 10000rpx;
|
||
}
|
||
|
||
.range-bar-progress {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: blueviolet;
|
||
}
|
||
|
||
.block {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translate(0, -50%);
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
box-shadow: 0rpx 0rpx 6rpx #ccc;
|
||
}
|
||
|
||
.block.active {
|
||
transform: translate(0, -50%) scale(1.5);
|
||
}
|
||
</style>
|