uniapp 自定义scroll-view滚动条

最新推荐文章于 2025-06-26 16:05:50 发布

走，带你去玩

最新推荐文章于 2025-06-26 16:05:50 发布

阅读量1.5k

点赞数 8

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_47517731/article/details/135607128

这篇文章描述了一个使用Vue编写的HTML模板，展示了如何实现一个带有滚动功能的图片列表，用户可以通过点击选择茅台酒图片。组件包括滚动视图、选中项高亮和侧边滚动条控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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