滑动进度条-自定义样式-uniapp

根据需求鸿蒙系统的滑动进度条

话不多说直接组件 + 效果

组件

<template>
	<view class="u-slider" @tap="onClick" :class="[disabled ? 'u-slider--disabled' : '']" :style="{
		backgroundColor: inactiveColor
	}">
		<view
			class="u-slider__gap"
			:style="[
				barStyle,
				{
					height: height + 'rpx',
					backgroundColor: activeColor
				}
			]"
		>
			<view class="u-slider__button-wrap" @touchstart="onTouchStart" 
				@touchmove="onTouchMove" @touchend="onTouchEnd" 
				@touchcancel="onTouchEnd"
				:style="{right: isWidth ? '10px' : '-7px'}">
				<slot v-if="$slots.default  || $slots.$default"/>
				<view v-else class="u-slider__button" :style="[blockStyle, {
					height: blockWidth + 'rpx',
					width: blockWidth + 'rpx',
					backgroundColor: blockColor
				}]"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'u-slider',
	props: {
		// 当前进度百分比值，范围0-100
		value: {
			type: [Number, String],
			default: 0
		},
		// 是否禁用滑块
		disabled: {
			type: Boolean,
			default: false
		},
		// 滑块宽度，高等于宽，单位rpx
		blockWidth: {
			type: [Number, String],
			default: 30
		},
		// 最小值
		min: {
			type: [Number, String],
			default: 0
		},
		// 最大值
		max: {
			type: [Number, String],
			default: 100
		},
		// 步进值
		step: {
			type: [Number, String],
			default: 1
		},
		// 滑块条高度，单位rpx
		height: {
			type: [Number, String],
			default: 6
		},
		// 进度条的激活部分颜色
		activeColor: {
			type: String,
			default: '#2979ff'
		},
		// 进度条的背景颜色
		inactiveColor: {
			type: String,
			default: '#c0c4cc'
		},
		// 滑块的背景颜色
		blockColor: {
			type: String,
			default: '#ffffff'
		},
		// 用户对滑块的自定义颜色
		blockStyle: {
			type: Object,
			default() {
				return {};
			}
		},
	},
	data() {
		return {
			startX: 0,
			status: 'end',
			newValue: 0,
			distanceX: 0,
			startValue: 0,
			barStyle: {},
			sliderRect: {
				left: 0,
				width: 0
			},
			isWidth: 0
		};
	},
	watch: {
		value(n) {
			// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
			if(this.status == 'end') this.updateValue(this.value, false);
		}
	},
	created() {
		this.updateValue(this.value, false);
	},
	mounted() {
		// 获取滑块条的尺寸信息
		const query = uni.createSelectorQuery().in(this)
		query.select(".u-slider").boundingClientRect(rect => {
			this.sliderRect = rect;
		}).exec()
		// this.$uGetRect('.u-slider').then(rect => {
		// 	this.sliderRect = rect;
		// });
	},
	methods: {
		onTouchStart(event) {
			if (this.disabled) return;
			this.startX = 0;
			// 触摸点集
			let touches = event.touches[0];
			// 触摸点到屏幕左边的距离
			this.startX = touches.clientX;
			// 此处的this.value虽为props值，但是通过$emit('input')进行了修改
			this.startValue = this.format(this.value);
			// 标示当前的状态为开始触摸滑动
			this.status = 'start';
		},
		onTouchMove(event) {
			if (this.disabled) return;
			// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
			// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
			if (this.status == 'start') this.$emit('start');
			let touches = event.touches[0];
			// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
			this.distanceX = touches.clientX - this.sliderRect.left;
			// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
			// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
			this.newValue = (this.distanceX / this.sliderRect.width) * 100;
			this.status = 'moving';
			// 发出moving事件
			this.$emit('moving');
			this.updateValue(this.newValue, true);
		},
		onTouchEnd() {
			if (this.disabled) return;
			if (this.status === 'moving') {
				this.updateValue(this.newValue, false);
				this.$emit('end');
			}
			this.status = 'end';
		},
		updateValue(value, drag) {
			// 去掉小数部分，同时也是对step步进的处理
			const width = this.format(value);
			// 不允许滑动的值超过max最大值，百分比也不能超过100
			if(width > this.max || width > 100) return;
			// 设置移动的百分比值
			let barStyle = {
				width: width + '%'
			};
			// console.log('width', width)
			this.isWidth = width
			// 移动期间无需过渡动画
			if (drag == true) {
				barStyle.transition = 'none';
			} else {
				// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
				delete barStyle.transition;
			}
			// 修改value值
			this.$emit('input', width);
			this.barStyle = barStyle;
		},
		format(value) {
			// 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
			return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
		},
		onClick(event) {
			if (this.disabled) return;
			// 直接点击滑块的情况，计算方式与onTouchMove方法相同
			const value = ((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * 100;
			this.updateValue(value, false);
		}
	}
};
</script>

<style lang="scss" scoped>
// @import "../../libs/css/style.components.scss";

.u-slider {
	position: relative;
	border-radius: 999px;
	border-radius: 999px;
	background-color: #ebedf0;
}

.u-slider:before {
	position: absolute;
	right: 0;
	left: 0;
	content: '';
	top: -8px;
	bottom: -8px;
	z-index: -1;
}

.u-slider__gap {
	position: relative;
	border-radius: inherit;
	transition: width 0.2s;
	transition: width 0.2s;
	background-color: #1989fa;
}

.u-slider__button {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	background-color: #fff;
	cursor: pointer;
}

.u-slider__button-wrap {
	position: absolute;
	top: 50%;
	transform: translate3d(50%, -50%, 0);
}

.u-slider--disabled {
	opacity: 0.5;
}
</style>

页面引入

<template>
    <view class="page" >
		<view style="width: 300px; margin: 60px 20px;">
			<cu-progress v-model="value" min="80" max="95" height="32":use-slot="true" @input="endSlider">
				<view style="background: #ffffff;border-radius: 100%;width: 14px;height: 14px;;">
				</view>
			</cu-progress>
		</view>
    </view>
</template>

<script>
   //组件引入
	import cuProgress from '@/components/cu-progress/cu-progress.vue'
    export default {
		components: {
			cuProgress
		},
        data() {
            return {
                value:0
            }
        },
        mounted() {
            // this.getInfo()
        },
        methods: {
			endSlider(e) {
				console.log('iiii', e)
			},
        }
    }
</script>

<style>
    .page {
        display: flex;
        flex-direction: row;
    }

    .zoom {
        width: 50vw;
        height: 18px;
        margin-left: 95rpx;
        background-color: #007AFF;
        border-radius: 64rpx;
    }
    .ball {
        width: 15px;
        height: 15px;
		margin-top: 2px;
        border-radius: 100%;
        background-color: #00FFFF;
    }
</style>

注：根据uview 1.x 进行改编
感谢 https://v1.uviewui.com/components/slider.html