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>
相关推荐
Predestination王瀞潞38 分钟前
WEB前端技术基础(第四章:JavaScript-网页动态交互语言)
前端·javascript·交互
2501_9160074739 分钟前
免费iOS加固方案指南
android·macos·ios·小程序·uni-app·cocoa·iphone
静西子3 小时前
Vue3路由
前端·javascript·vue.js
J总裁的小芒果3 小时前
vue3 全局定义动态样式
前端·javascript·vue.js
whalekv3 小时前
10月25日
前端·javascript·vue.js
xuelong-ming3 小时前
uniapp vue3 点击跳转外部网页
vue.js·uni-app
万邦科技Lafite5 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
Never_Satisfied7 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
一只小透明啊啊啊啊7 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友8 小时前
设计模式有哪几类?
前端·后端·设计模式