uniapp scroll-view横向滚动 自定义底部指示器样式

uniapp scroll-view横向滚动 自定义底部指示器样式
1.效果
2.思路：动态设置元素的margin

3.代码

<template>
	<view style="margin: 0rpx;">
		<scroll-view scroll-x="true" class="images-view" @scroll="scroll">
			<view class="images-view-item" v-for="(item,index) in imageList" :key="index">
				<image src="../../static/cs1.jpg" class="images-view-item">image>
			view>

		scroll-view>
		

		<view class="progressBg">
			<view class="progressAction" :style="{marginLeft: `${progressMargin}%`}">view>
		view>
	view>
template>

<script>
	export default {
		data() {
			return {
				imageList: [1, 2],
				progressMargin:0
			}
		},
		methods: {
			scroll(event) {
				//
				console.log("距离每个边界距离" + event.detail.scrollWidth);
				console.log("距离x距离" + event.detail.scrollLeft);
				var num1 = event.detail.scrollWidth / 2
				var num2 = event.detail.scrollLeft
				var p = (num2 / num1) * 100;
				
				this.progressMargin = Math.round(p)-10;
				console.log("percent==>" + this.progressMargin);
				if (this.progressMargin < 0) {
					this.progressMargin = 0;
				}
				if (this.progressMargin >99) {
					this.progressMargin = 90;
				}
				// if (p >=100) {
				// 	this.progressMargin = 80;
				// }
			},
		}
	}
script>

<style >
	
	.progressAction{
		width: 10%;
		height: 15rpx;
		border-radius: 20rpx;
		background-color: #FF7C0E;
	    /* margin-left: 50%; */
	}
	.progressBg {
		width: 100%;
		height: 15rpx;
		border-radius: 20rpx;
		background-color: #999999;

	}

	.images-view {
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}

	.images-view-item {
		display: inline-block;
		width: 100%;
		/* margin-right: 20rpx; */
	}
style>

4.解释：this.progressMargin = Math.round§-10;减去10 是 .progressAction
width: 10%; 减去的是指示器的宽度10%