uniapp 自定义scroll-view滚动条

html 复制代码

<template>
	<view class="taste-view">
		<view class="taste-border w-100"></view>
		<u-sticky>
			<view class="w-100 bg-f taste-heard">
				<scroll-view scroll-x="true" :show-scrollbar="true" :scroll-with-animation="true" class="scroll_x_view" @scroll="scrollClick">
					<view class="row">
						<view class="direction heard-item bdr-8 p-t-12 m-r-24" v-for="i in selectList" :key="i"
							:class="activeIndex==i ? 'active-border' :''" @click="selectClick(i)">
							<u-image width="72rpx" height="96rpx" border-radius="0"
								src="https://donglaihe.zyrkeji.cn/uploads/202312201121118638a3662.jpg"></u-image>
							<view class="f-20 text-ellipsis one-text-ellipsis m-t-8">茅台</view>
						</view>
					</view>
				</scroll-view>
				<view class="flex-center m-t-12">
					<view class="schedule-view bdr-4 position-relative">
						<view class="position-absolute top-0 left-0 bg-3 bdr-4" :style="{left:scrollLeft}"></view>
					</view>
				</view>
			</view>
		</u-sticky>
	</view>
</template>

javascript 复制代码

<script>
	export default {
		data() {
			return {
				selectList: 20,
				activeIndex: -1,
				scrollLeft:0
			}
		},
		methods:{
			selectClick(index){
				this.activeIndex=this.activeIndex==index ? -1 : index
			},
			scrollClick(e){
				this.scrollLeft=e.detail.scrollLeft/(e.detail.scrollWidth-343)*30+'rpx'
			}
		}
	}
</script>

css 复制代码

<style lang="scss" scoped>
	.taste-view {
		width: 100vw;
		min-height: 100vh;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

		.taste-border {
			background-color: #F4F5F9;
			height: 12rpx;
		}

		.taste-heard {
			padding: 16rpx 32rpx;

			.scroll_x_view {
				white-space: nowrap;

				.heard-item {
					min-width: 124rpx;
					width: 124rpx;
					height: 156rpx;
					background: #F4F5F9;
					border: 1rpx solid #F4F5F9;
					transition: all .3s;
				}

				.active-border {
					border-color: #F7BB15;
				}
			}
			.schedule-view{
				width: 60rpx;
				height: 6rpx;
				background: #F4F5F9;
				view{
					width: 30rpx;
					height: 6rpx;
				}
			}
		}
	}
</style>