uniapp可滑动的顶部导航

最新推荐文章于 2025-07-03 10:53:24 发布

兄弟连勇闯天涯

最新推荐文章于 2025-07-03 10:53:24 发布

阅读量1w

点赞数

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uniapp顶部导航滑动条

本文链接：https://blog.youkuaiyun.com/endianzhijia/article/details/88580131

本文记录了作者在uniapp中遇到的顶部导航栏滑动问题的解决过程，分享了关键实现步骤，适合uniapp初学者参考。

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

1.刚开始接触uniapp的时候一直纠接这个导航栏滑动的问题。今天抽空把有用的部分提拉出来。做个小笔记。
在这里插入图片描述

<template>
	<view class="container">
		<view class="status_bar" v-bind:style="{ height: statusBarHeight }"></view>
	   <!-- <view class="navbar">
			 <view :class="[tabindex==1?'navbtn':'navactive']"   @click="switchtabar(1)">接单任务</view>
			 <view :class="[tabindex==2?'navbtn':'navactive']"    @click="switchtabar(2)">套餐任务</view>
			 <view :class="[tabindex==3?'navbtn':'navactive']"    @click="switchtabar(3)">接单记录</view>
		</view> -->
		<view class="uni-tab-bar">
			<scroll-view id="tab-bar" class="uni-swiper-tab" scroll-x :scroll-left="scrollLeft">
				<view v-for="(tab,index) in tabBars" :key="tab.id" :class="['swiper-tab-list',tabIndex==index ? 'active' : '']" :id="tab.id"
				 :data-current="index" @click="tapTab(i