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>
相关推荐
雪碧聊技术1 小时前
uniapp如何创建并使用组件?组件通过Props如何进行数据传递?
uni-app·创建组件·使用组件·props数据传递
中微子2 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
@Dream_Chaser2 小时前
uniapp页面间通信
uni-app
秋田君2 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子3 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡4 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则4 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele4 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4534 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友4 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维