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>
相关推荐
β添砖java1 小时前
CSS网格布局
前端·css·html
木易 士心3 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博3 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中3 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
卷Java3 小时前
饼状图修复总结
java·spring boot·uni-app·echarts
sophie旭3 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享3 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom3 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室3 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣4 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js