用uniapp实现下图的样式

代码如下：

<template>
	<view class="content">
		<view class="data-box" ref="dataBox" @touchend="handleEnd">
			<view class="data-list">
				<view class="data-item num1">1</view>
				<view class="data-item num2">2</view>
				<view class="data-item num3">3</view>
				<view class="data-item num4">4</view>
				<view class="data-item num5">5</view>
				<view class="data-item num6">6</view>
			</view>
		</view>

		<view class="indicator">
			<view class="line-bar" :style="{'transform':'translateX('+translateX + 'px)'}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				translateX: 0
			};
		},
		methods: {
			handleEnd(e) {
				// 获取滚动条所在位置
				let scrollLeft = this.$refs.dataBox.$el.scrollLeft;
				// 获取当前屏幕宽度
				const screenWidth = uni.getSystemInfoSync().screenWidth;
				// 获取item的宽度(px)
				let itemWidth = ((screenWidth * Number.parseInt(2250)) / 750) / 6;
				// 根据滚动条所在位置计算当前所在的item
				let index = scrollLeft / itemWidth;
				// 移动滚动条
				this.translateX = index * (120 / 6);// 滚动条的宽度 / item的总数量
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.data-box {
			width: 100%;
			overflow: scroll;
		}

		.data-list {
			width: 2250rpx;
			height: 100px;
		}

		.data-item {
			display: inline-block;
			width: 50vw;
			height: 100px;
		}

		.num1 {
			background-color: palegoldenrod;
		}

		.num2 {
			background-color: pink;
		}

		.num3 {
			background-color: skyblue;
		}

		.num4 {
			background-color: plum;
		}

		.num5 {
			background-color: seagreen;
		}
		
		.num6 {
			background-color: orchid;
		}

		.indicator {
			margin: 10rpx auto;
			border-radius: 10rpx;
			height: 4px;
			width: 120px;// 滚动条宽度
			background-color: #797979;
			display: flex;

			.line-bar {
				width: 40px;// (显示的item数量 / item的总数量) * 滚动条宽度
				background-color: pink;
				transition-duration: .3s;
			}
		}
	}
</style>

效果如下：