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

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

3.代码

	
		
			
				
			

		
		

		
			
		
	



	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 99) {
					this.progressMargin = 90;
				}
				// if (p >=100) {
				// 	this.progressMargin = 80;
				// }
			},
		}
	}



	
	.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; */
	}

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