uni-app顶部导航栏下拉滑动固定到屏幕顶部

最新推荐文章于 2024-08-22 11:53:20 发布

O3ohn

最新推荐文章于 2024-08-22 11:53:20 发布

阅读量3.9k

点赞数 3

分类专栏：小问题 uniapp 文章标签： uni-app

本文链接：https://blog.csdn.net/ka_xingl/article/details/110083246

版权

小问题同时被 2 个专栏收录

18 篇文章 2 订阅

订阅专栏

uniapp

6 篇文章 0 订阅

订阅专栏

示例图片
在这里插入图片描述

代码

<template>
	<view style="display: flex;flex: row; position:fixed; left: 0; width: 100%; top: 30;z-index: 999;">
		<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
			<view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in statusList" :key="index" @tap="tabSelect" :data-id="index">
				{{item}}
			</view>
		</scroll-view>
	</view>
</template>
<script>
	export default {
		components: {
		},
		data() {
			return {
				TabCur: 0,
				scrollLeft: 0
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				console.log(this.TarCur)
			},
		}
	}
</script>
<style>

/* ==================
         导航栏
 ==================== */

.nav {
	white-space: nowrap;
}

::-webkit-scrollbar {
	display: none;
}

.nav .cu-item {
	height: 90upx;
	display: inline-block;
	line-height: 90upx;
	margin: 0 10upx;
	padding: 0 20upx;
}

.nav .cu-item.cur {
	border-bottom: 4upx solid;
}
.text-green,
.line-green,
.lines-green {
	color: #39b54a;
}
.bg-white {
	background-color: #ffffff;
	color: #666666;
}
.nav .cu-item.cur {
	border-bottom: 4upx solid;
}
</style>