uniapp实现teb选项卡示例及注意点

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

why_Because

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

阅读量879

点赞数 1

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uniapp teb

本文链接：https://blog.youkuaiyun.com/qq_41287423/article/details/98943391

本文详细介绍了在uniapp中使用teb选项卡的具体实现过程，包括如何设置父级容器的高度以确保内容正常显示，以及添加scroll-y属性实现页面的上下滚动。同时，还提到了通过CSS样式实现选项卡的吸顶效果，具体方法是使用position: sticky和top: 0upx。

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

要给父级.article设置height：100%,页面被内容撑开，才能显示数据；
给添加scroll-y可上下滑动;
height: calc(100% - 100rpx);
css实现吸顶：position: sticky;top: 0upx;

<template>
<view  class="article">
		<view class="uni-tab-bar">
			<scroll-view id="tab-bar" class="" scroll-x :scroll-left="scrollLeft">
				<view v-for="(tab,index) in tabBars" :key="tab.id" class="swiper-tab-list" :class="tabIndex==index ? 'active' : ''"
				 :id="tab.id" :data-current="index" @click="tapTab">{
  
  {tab.name}}</view>
			</scroll-view>

			<swiper :current="tabIndex" class="swiper-box " :duration="300" @change="changeTab" :circular="circular">    
						<!-- :circular="circular" 不循环 -->
				<!-- 热榜 -->
				<swiper-item>
					<scroll-view class="list" scroll-y >
							热榜热榜热榜
					</scroll-view>