删除垃圾

range-slider_1.0.11/README.md

@@ -1,75 +0,0 @@
-# uni-app-range-slider   
-uni-app 区间选择滑块   
-   
-说明：目前支持平台有APP、微信小程序、H5，其他平台理论上支持。   
-   
-
-## 效果图：   
-![效果图](https://zhangdaren.github.io/uni-app-range-slider/static/preview.png)   
-   
-## range-slider属性   
-   
-| 属性名 | 类型 | 默认值 | 说明 |
-|---|---|---|---|
-| width | Number | 750 | 组件宽度(rpx)|
-| height |Number |100 | 组件高度(rpx) |
-| block-size | Number | 50 | 滑块大小(rpx) |
-| bar-height | Number | 10 | 进度条高度(rpx) |
-| background-color | String | #e9e9e9 | 进度条背景色 |
-| active-color | String | #1aad19 | 已选择的颜色 |
-| min | Number | 0 | 最小值 |
-| max |Number | 100 | 最大值 |
-| values |Array| [0,100] | 当前区间值 |
-| step |Number| 1 | 步长值 |
-| liveMode |Boolean| true | 是否即时刷新数值，默认true |
-| @rangechange | EventHandle | |完成一次拖动后触发的事件，event.detail = {minValue: value1,maxValue:value2, originalValue:value3} |
-   
----
-## tips:   
-修改自：https://github.com/Money888/wechat-rangeslider   
-   
----
-## 更新历史说明：   
-## v1.0.11(20200110)   
-* [修复] step为10或更大时，数值计算出问题的bug   
-* 
-## v1.0.10(20200102)   
-* [优化] 增加拖动时圆点变大的效果   
-* [优化] 将所有upx替换为rpx   
-* [修复] 因为设置step，导致拖动会有偏移的bug   
-* 
-## v1.0.9(20190823)   
-* [修复] 修复使用step时，可能会遇到精度问题，达不到max值   
-* [修复] 修复使用min大于0时，会跳动的bug   
-
-## v1.0.8(20190719)   
-* [新增] liveMode模式，默认为true，即拖动就会刷新数值；设为false时，每次拖动只在touchEnd派发一次change事件   
-* [建议] 示例里之前step参数直接写为数值，在h5上会报错，现修改为data下面的变量   
-   
-### v1.0.7(20190604)   
-* [新增] 支持设置步长，如显示值为0.5, 1, 1.5……这类的值   
-* [新增] 增加一个选择时间区间的示例   
-* 回调函数里默认输出的是格式化后的值，为了取值方便，也并原始值一并给出，方便操作   
-   
-### v1.0.6(20190521)   
-* 适配最新自定义组件编译模式，如遇小程序/app不能正常使用时，请下载最新版   
-   
-### v1.0.5(20190417)   
-* 解决某种微信环境内，touchstart回调的e参数不完整的问题   
-   
-### v1.0.4(20190326)   
-* 解决手动赋值不生效的问题   
-   
-### v1.0.3(20190322)   
-* 解决h5平台上，无法设置初始值的问题   
-   
-### v1.0.2(20190306)   
-* 兼容H5，支持发布到浏览器   
-   
-### v1.0.1   
-* 增加拖动过程中，自动更新滑块值功能。   
-   
-### v1.0.0   
-* 初次提交   
-
-

range-slider_1.0.11/components/range-slider/range-slider.vue

@@ -1,391 +0,0 @@
-<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>

range-slider_1.0.11/pages/index/index.vue

@@ -1,219 +0,0 @@
-<template>
-	<view class="content">
-		<view class="text-center mrg50T"><text class="title">区间选择滑块/范围选择滑块</text></view>
-
-		<view class="part part1 mrg50T">
-			<view class="title">1. 默认示例：</view>
-			<view class="text-center mrg10T">
-				<text>区间：</text>
-				<text>{{ rangeValues[0] }}</text>
-				<text>~</text>
-				<text>{{ rangeValues[1] }}</text>
-			</view>
-			<view class="rowBox mrg50T">
-				<view class="sliderBox">
-					<RangeSlider
-						:width="slideWidth"
-						:height="slideHeight"
-						:blockSize="slideBlockSize"
-						:min="slideMin"
-						:max="slideMax"
-						:values="rangeValues"
-						:step="step"
-						:liveMode="isLiveMode"
-						@rangechange="onRangeChange"
-					>
-						<view slot="minBlock" class="range-slider-block"></view>
-						<!-- 左边滑块的内容 -->
-						<view slot="maxBlock" class="range-slider-block"></view>
-						<!-- 右边滑块的内容 -->
-					</RangeSlider>
-				</view>
-			</view>
-
-			<button @tap="test" class="testBtn">手动设置为10~60</button>
-		</view>
-
-		<view class="part part2 mrg50T">
-			<view class="title">2. 示例：将原始数据格式化为时间显示</view>
-			<view class="text-center mrg50T">
-				<RangeSlider
-					:width="slideWidth"
-					:height="slideHeight"
-					:blockSize="slideBlockSize"
-					:min="timeMinValue"
-					:max="timeMaxValue"
-					:activeColor="'#E68B28'"
-					:values="rangeValues2"
-					@rangechange="onRangeChange2"
-				>
-					<view slot="minBlock" class="range-slider-block"></view>
-					<!-- 左边滑块的内容 -->
-					<view slot="maxBlock" class="range-slider-block"></view>
-					<!-- 右边滑块的内容 -->
-				</RangeSlider>
-				<text class="plan-unit">{{ serTime }}</text>
-			</view>
-		</view>
-
-		<view class="part part3 mrg50T">
-			<view class="title">3. 示例：页面第三个滑块</view>
-
-			<view class="text-center mrg10T">
-				<text>区间：</text>
-				<text>{{ rangeValues3[0] }}</text>
-				<text>~</text>
-				<text>{{ rangeValues3[1] }}</text>
-			</view>
-
-			<view class="text-center mrg50T">
-				<RangeSlider
-					:width="slideWidth"
-					:height="slideHeight"
-					:blockSize="slideBlockSize"
-					:min="slideMin"
-					:max="slideMax"
-					:values="rangeValues3"
-					:step="step"
-					:liveMode="isLiveMode"
-					@rangechange="onRangeChange3"
-				>
-					<view slot="minBlock" class="range-slider-block"></view>
-					<!-- 左边滑块的内容 -->
-					<view slot="maxBlock" class="range-slider-block"></view>
-					<!-- 右边滑块的内容 -->
-				</RangeSlider>
-			</view>
-		</view>
-
-		<text class="tips">修改自：https://github.com/Money888/wechat-rangeslider</text>
-	</view>
-</template>
-
-<script>
-import RangeSlider from '../../components/range-slider/range-slider.vue';
-
-export default {
-	data() {
-		return {
-			// rangeValues: [2, 5], //当前区间值
-			// slideWidth: 350, //宽度
-			// slideHeight: 80,  //高度
-			// slideBlockSize: 56, //圆形按钮大小
-			// slideMin: 0,  //slider最小值
-			// slideMax: 12,  //slider最大值
-
-			rangeValues: [4, 5.2],
-			slideWidth: 350,
-			slideHeight: 80,
-			slideBlockSize: 30,
-			slideMin: 0,
-			slideMax: 10,
-			isLiveMode: true,
-			step: 0.1,
-			//
-			timeMinValue: 0,
-			timeMaxValue: 10,
-
-			rangeValues2: [1, 6],
-			serTime: '02:24:00-14:24:00',
-
-			rangeValues3: [3, 5]
-		};
-	},
-	components: {
-		RangeSlider
-	},
-	onLoad() {
-		console.log('index onload');
-	},
-	methods: {
-		pad: function(num, n) {
-			return Array(n - ('' + num).length + 1).join(0) + num;
-		},
-		onRangeChange: function(e) {
-			this.rangeValues = [e.minValue, e.maxValue];
-
-			console.log(this.rangeValues);
-			console.log(JSON.stringify(e));
-		},
-		test: function() {
-			this.rangeValues = [4.2, 6.6];
-		},
-		onRangeChange2: function(e) {
-			let startTime = this.formatTimeBySliderValue(e.originalValue.minValue);
-			let endTime = this.formatTimeBySliderValue(e.originalValue.maxValue);
-			this.serTime = startTime + '-' + endTime;
-		},
-		onRangeChange3: function(e) {
-			this.rangeValues3 = [e.minValue, e.maxValue];
-		},
-		formatTimeBySliderValue(value) {
-			//按比例，将滑块上面的数值进行转换为时间形式
-			//转换为分钟数
-			let minutes = (24 * 60 * value) / this.slideMax;
-			//转换为小时数
-			let hours = parseInt(minutes / 60);
-			//剩余分钟数
-			let minutes_min = parseInt(minutes % 60);
-			return '' + this.pad(hours, 2) + ':' + this.pad(minutes_min, 2) + ':' + '00';
-		}
-	}
-};
-</script>
-
-<style lang="scss">
-view {
-	display: flex;
-}
-
-.content {
-	justify-content: center;
-	flex-direction: column;
-}
-
-.sliderBox {
-	justify-content: center;
-	margin-right: 50rpx;
-}
-
-.text-center {
-	justify-content: center;
-}
-
-.rowBox {
-	flex-direction: row;
-	align-items: center;
-	justify-content: center;
-}
-
-.mrg10T {
-	margin-top: 10rpx;
-}
-
-.tips {
-	color: #999;
-	font-size: 24rpx;
-	text-align: center;
-	margin-top: 100rpx;
-}
-
-.testBtn {
-	margin-top: 50rpx;
-}
-
-.part {
-	flex-direction: column;
-	justify-content: center;
-	border-top: 1rpx solid #ccc;
-	padding-top: 50rpx;
-	.title {
-		font-size: 32rpx;
-		padding: 0 30rpx;
-	}
-}
-
-.part2 {
-	margin-top: 100rpx;
-}
-</style>