暂时使用原生进度条。自定义进度条调试中

components/my-video-list/progress.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="progress-box">
+		<view class="line" :style="{width:percent+'px'}">
+		</view>
+		<view class="block" @touchstart="progressTouchStart" @touchmove="progressTouchMove"
+		:style="{transform:'translateX('+percent+'px)'}"
+			@touchend="progressTouchEnd"></view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref
+	} from 'vue';
+	const props=defineProps({
+	})
+	
+	
+	let percent=ref(50)
+	//进度条
+	let progressIsTouch = false
+	let start = 0
+	function progressTouchStart(e) {
+		console.log(e);
+		start = e.touches[0].clientX
+		progressIsTouch = true
+	}
+
+	function progressTouchMove(e) {
+		console.log(e);
+		const step = 1;
+		playPercent.value += step
+	}
+
+	function progressTouchEnd(e) {
+		console.log(e);
+		progressIsTouch = false
+	}
+</script>
+
+<style lang="scss" scoped>
+	.progress-box {
+		border-radius: 20px;
+		height: 5px;
+		margin:  4px 0;
+		background-color: rgba(255, 255, 255, .6);
+		box-shadow: 0 0 1px #eee;
+		flex-direction: row;
+		overflow: visible;
+		.line {
+			background-color: #fff;
+			border-radius: 20px;
+			overflow: visible;
+		}
+		$block-size: 8px;
+		.block {
+			top: -1px;
+			left: 0;
+			position: absolute;
+			z-index: 2;
+			width: $block-size;
+			height: $block-size;
+			background-color: #fff;
+			border-radius: 50%;
+			box-shadow: 0 0 1px #eee;
+		}
+	}
+</style>