uniapp scroll-view横向滚动 底部自定义滚动条

uniapp scroll-view横向滚动 底部自定义滚动条
1.效果

2.代码

<template>
	<view style="margin: 0rpx;">
		<scroll-view scroll-x="true" class="images-view" @scroll="scroll2">
			<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>
		<progress :percent="percent" border-radius="10" stroke-width="8" backgroundColor="#999" activeColor="#FF7C0E" />
	view>
template>

<script>
	export default {
		data() {
			return {
				imageList: [1, 2],
				percent: 10,
			}
		},
		methods: {		
			scroll(event) {
				var num1 = event.detail.scrollWidth / 2
				var num2 = event.detail.scrollLeft
				var p = (num2 / num1) * 100;
				this.percent = p;
				if (p === 0) {
					this.percent = 10;
				}
			},
		}
	}
script>

<style >


	.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>