renhailaowu/components/range/range-slider.js

const _windowWidth = wx.getSystemInfoSync().windowWidth;
Component({
	properties: {
		//组件宽度
		width: {
			type: Number,
			value: 700,
			observer: function (newVal, oldVal, changedPath) {
				var that = this;
				if (newVal != that.data.width) {
					this._refresh();
				}
			},
		},
		contentWidth: {
			type: String,
			value: "100vw",
		},
		//组件高度
		height: {
			type: Number,
			value: 100,
		},
		//滑块大小
		blockSize: {
			type: Number,
			value: 60,
			observer: function (newVal, oldVal, changedPath) {
				var that = this;
				if (newVal != that.data.blockSize) {
					this._refresh();
				}
			},
		},
		//区间进度条高度
		barHeight: {
			type: Number,
			value: 10,
		},
		//背景条颜色
		backgroundColor: {
			type: String,
			value: "#e9e9e9",
		},
		//已选择的颜色
		activeColor: {
			type: String,
			value: "#E5EDFF",
		},
		//最小值
		min: {
			type: Number,
			value: 0,
			observer: function (newVal, oldVal, changedPath) {
				var that = this;
				if (newVal != that.data.min) {
					that._refresh();
				}
			},
		},
		//最大值
		max: {
			type: Number,
			value: 100,
			observer: function (newVal, oldVal, changedPath) {
				var that = this;
				if (newVal != that.data.max) {
					that._refresh();
				}
			},
		},
		//设置初始值
		values: {
			type: Object,
			value: [0, 100],
			observer: function (newVal, oldVal, changedPath) {
				var that = this;
				// var values = that.data.values;
				if (that._isValuesValid(newVal) && that._isValuesValid(oldVal)) {
					if (oldVal[0] != newVal[0] || oldVal[1] != newVal[1]) that._refresh();
				}
			},
		},
	},
	/**
	 * 组件生命周期函数，在组件布局完成后执行
	 */
	ready() {
		// console.log(this.data.activeColor);
		// console.log(this.data.width);
		this.setData({
			progressBarWidth: this.data.width,
		});
		this._refresh();
	},
	options: {
		multipleSlots: true,
	},
	data: {
		MAX_LENGTH: 700,
		minBlockLeft: 0,
		maxBlockLeft: 700,
		progressBarLeft: 0,
		progressBarWidth: 700,
		fangdou: true,
	},
	methods: {
		_pxToRpx: function (px) {
			return (750 * px) / _windowWidth;
		},
		_onBlockTouchStart: function (e) {
			console.log(e);
			this._blockDownX = e.changedTouches[0].pageX;
			this._blockLeft = e.target.dataset.left;
			this._curBlock = e.target.dataset.tag;
		},
		_onBlockTouchMove: function (e) {
			var that = this;
			if (that.data.fangdou) {
				that.data.fangdou = false;
				var values = that._calculateValues(e);
				that._refreshProgressBar(values[2], values[3]);
				that._refreshBlock(values[2], values[3]);
				var eventDetail = {
					minValue: values[0],
					maxValue: values[1],
					fromUser: true,
				};
				var eventOption = {};
				that.triggerEvent("rangechange", eventDetail, eventOption);
				setTimeout(() => {
					that.data.fangdou = true;
				}, 5);
			}
		},
		_onBlockTouchEnd: function (e) {
			var that = this;
			var values = that._calculateValues(e);
			that._refreshProgressBar(values[2], values[3]);
			that._refreshBlock(values[2], values[3]);
			var eventDetail = {
				minValue: values[0],
				maxValue: values[1],
				fromUser: true,
			};
			var eventOption = {};
			that.triggerEvent("rangechange", eventDetail, eventOption);
		},
		_isValuesValid: function (values) {
			return values != null && values != undefined && values.length == 2;
		},
		/**
		 * 根据手势计算相关数据
		 */
		_calculateValues: function (e) {
			var that = this;
			var moveLength = e.changedTouches[0].pageX - that._blockDownX;
			var left = that._blockLeft + that._pxToRpx(moveLength);
			left = Math.max(0, left);
			left = Math.min(left, that.data.MAX_LENGTH);
			var minBlockLeft = that.data.minBlockLeft;
			var maxBlockLeft = that.data.maxBlockLeft;
			if (that._curBlock == "minBlock") {
				minBlockLeft = left;
			} else {
				maxBlockLeft = left;
			}
			var range = that.data.max - that.data.min;
			var minLeft = Math.min(minBlockLeft, maxBlockLeft);
			var maxLeft = Math.max(minBlockLeft, maxBlockLeft);
			var minValue = (minLeft / that.data.MAX_LENGTH) * range + that.data.min;
			var maxValue = (maxLeft / that.data.MAX_LENGTH) * range + that.data.min;
			return [minValue, maxValue, minLeft, maxLeft];
		},
		/**
		 * 计算滑块坐标
		 */
		_calculateBlockLeft: function (minValue, maxValue) {
			var that = this;
			var blockSize = that.data.blockSize;
			var range = that.data.max - that.data.min;
			var minLeft = ((minValue - that.data.min) / range) * that.data.MAX_LENGTH;
			var maxLeft = ((maxValue - that.data.min) / range) * that.data.MAX_LENGTH;
			return [minLeft, maxLeft];
		},
		/**
		 * 刷新进度条视图
		 */
		_refreshProgressBar: function (minBlockLeft, maxBlockLeft) {
			var that = this;
			var blockSize = that.data.blockSize;
			that.setData({
				progressBarLeft: minBlockLeft + blockSize / 2,
				progressBarWidth: Math.abs(maxBlockLeft - minBlockLeft),
			});
		},
		/**
		 * 刷新滑块视图
		 */
		_refreshBlock: function (minBlockLeft, maxBlockLeft) {
			var that = this;
			that.setData({
				minBlockLeft: minBlockLeft,
				maxBlockLeft: maxBlockLeft,
			});
		},
		/**
		 * 刷新整个视图
		 */
		_refresh: function () {
			var that = this;
			var MAX_LENGTH = that.data.width - that.data.blockSize;
			that.setData({
				MAX_LENGTH: MAX_LENGTH,
				maxBlockLeft: MAX_LENGTH,
				progressBarWidth: MAX_LENGTH,
			});
			var values = that.data.values;
			if (that._isValuesValid(values)) {
				values[0] = Math.max(that.data.min, values[0]);
				values[0] = Math.min(values[0], that.data.max);
				values[1] = Math.max(that.data.min, values[1]);
				values[1] = Math.min(values[1], that.data.max);
				var leftValues = that._calculateBlockLeft(values[0], values[1]);
				that._refreshProgressBar(leftValues[0], leftValues[1]);
				that._refreshBlock(leftValues[0], leftValues[1]);
			}
		},
	},
});