uniapp中三种tab切换实战案例

已于 2022-04-18 10:25:38 修改
阅读量1.3k 收藏 7
点赞数 1
分类专栏： uniapp 文章标签： uni-app
于 2021-11-03 14:27:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/babyxuqian/article/details/121120296
版权

目录

一、比较常见的普通tab选项卡

二、使用scroll-view滑动

 三、scroll-view滑动 + swiper轮播联动

一、比较常见的普通tab选项卡

代码块部分

<template>
	<view class="content">
		<view class="hand">
			<view class="dataInfo">
				<view class="dataList" @click="navIndex = index" v-for="(item,index) in dataInfo" :key='item.titleId'>
					<text :class="navIndex==index?'activite':''">{{item.title}}</text>
				</view>
			</view>
		</view>
		<!-- 内容切换开始 -->
		<view class="main">
			<view class="htmlContent" v-if="navIndex==0">
				<text>html</text>
			</view>
			<view class="jsContent" v-if="navIndex==1">
				<text>javascript</text>
			</view>
			<view class="cssContent" v-if="navIndex==2">
				<text>css</text>
			</view>
			<view class="vueContent" v-if="navIndex==3">
				<text>vue</text>
			</view>
		</view>
		<!-- 内容切换结束 -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				dataInfo: [{
						title: 'HTML',
						titleId: 1
					},
					{
						title: 'JavaScript',
						titleId: 2
					},
					{
						title: 'CSS',
						titleId: 3
					},
					{
						title: 'VUE',
						titleId: 4
					}
				]
			}
		}
	}
</script>

<style>
	.content {
		padding: 20rpx;
	}

	.hand .dataInfo {
		display: flex;
		justify-content: space-between;
		text-align: center;
	}

	.hand .dataInfo .dataList {
		flex: 1;
		border-right: 1px solid #bcbcbc;
		border-top: 1px solid #bcbcbc;
	}

	.hand .dataInfo .dataList:first-child {
		border-left: 1px solid #bcbcbc;
	}

	.hand .dataInfo .dataList text {
		font-size: 30rpx;
		color: grey;
		background-color: #e6e6e6;
		display: block;
		line-height: 70rpx;
	}

	.hand .dataInfo .dataList text.activite {
		background-color: grey;
		color: #fff;
	}

	.main {
		border: 1px solid #bcbcbc;
		height: 200px;
	}

	.main .htmlContent,
	.cssContent,
	.jsContent,
	.vueContent text {
		font-size: 40rpx;
		color: #0F254E;
		display: block;
		padding: 20rpx;
	}
</style>

二、使用scroll-view滑动

代码块部分

<template>
	<view class="content">
		<view class="hand">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="dataInfo">
					<view class="dataList" v-for="(item,index) in dataInfo" :key='item.titleId' :id="item.titleId"
						@click="navIndex = index">
						<text :class="navIndex==index?'activite':''">{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 内容切换开始 -->
		<view class="main">
			<view class="htmlContent" v-if="navIndex==0">
				<text>html</text>
			</view>
			<view class="jsContent" v-if="navIndex==1">
				<text>javascript</text>
			</view>
			<view class="cssContent" v-if="navIndex==2">
				<text>css</text>
			</view>
			<view class="vueContent" v-if="navIndex==3">
				<text>vue</text>
			</view>
			<view class="reactContent" v-if="navIndex==4">
				<text>react</text>
			</view>
		</view>
		<!-- 内容切换结束 -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				dataInfo: [{
						title: 'HTML',
						titleId: 'html'
					},
					{
						title: 'JavaScript',
						titleId: 'js'
					},
					{
						title: 'CSS',
						titleId: 'css'
					},
					{
						title: 'VUE',
						titleId: 'vue'
					},
					{
						title: 'React ',
						titleId: 'react '
					}
				]
			}
		}
	}
</script>

<style>
	.content {
		padding: 20rpx;
	}

	.hand .dataInfo {
		display: flex;
		text-align: center;
		width: 100%;
	}

	.hand .dataInfo .dataList {
		border-right: 1px solid #bcbcbc;
		border-top: 1px solid #bcbcbc;
	}

	.hand .dataInfo .dataList:first-child {
		border-left: 1px solid #bcbcbc;
	}

	.hand .dataInfo .dataList text {
		font-size: 30rpx;
		color: grey;
		background-color: #e6e6e6;
		display: block;
		line-height: 70rpx;
		width: 200rpx;
	}

	.hand .dataInfo .dataList text.activite {
		background-color: grey;
		color: #fff;
	}

	.main {
		border: 1px solid #bcbcbc;
		height: 200px;
	}

	.main .htmlContent,
	.cssContent,
	.jsContent,
	.reactContent,
	.vueContent text {
		font-size: 40rpx;
		color: #0F254E;
		display: block;
		padding: 20rpx;
	}
</style>

 三、scroll-view滑动 + swiper轮播联动

代码块部分

<template>
	<view class="content">
		<view class="hand">
			<scroll-view scroll-x="true" style="white-space: nowrap;">
				<view class="dataInfo">
					<view class="dataList" v-for="(item,index) in dataInfo" :key='item.titleId' :id="item.titleId"
						@click="navIndex = index">
						<text :class="navIndex==index?'activite':''">{{item.title}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 内容切换开始 -->
		<view class="main">
			<swiper :current="navIndex" @change="tabChange">
				<swiper-item>
					<view class="htmlContent" v-if="navIndex==0">
						<text>html</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="jsContent" v-if="navIndex==1">
						<text>javascript</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="cssContent" v-if="navIndex==2">
						<text>css</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="vueContent" v-if="navIndex==3">
						<text>vue</text>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="reactContent" v-if="navIndex==4">
						<text>react</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 内容切换结束 -->
	</view>

</template>

<script>
	export default {
		data() {
			return {
				navIndex: 0,
				dataInfo: [{
						title: 'HTML',
						titleId: 'html'
					},
					{
						title: 'JavaScript',
						titleId: 'js'
					},
					{
						title: 'CSS',
						titleId: 'css'
					},
					{
						title: 'VUE',
						titleId: 'vue'
					},
					{
						title: 'React ',
						titleId: 'react '
					}
				]
			}
		},
		methods: {
			tabChange(e) {
				this.navIndex = e.detail.current
			},
		}
	}
</script>

<style>
	.content {
		padding: 20rpx;
	}

	.hand .dataInfo {
		display: flex;
		text-align: center;
		width: 100%;
	}

	.hand .dataInfo .dataList {
		border-right: 1px solid #bcbcbc;
		border-top: 1px solid #bcbcbc;
	}

	.hand .dataInfo .dataList:first-child {
		border-left: 1px solid #bcbcbc;
	}

	.hand .dataInfo .dataList text {
		font-size: 30rpx;
		color: grey;
		background-color: #e6e6e6;
		display: block;
		line-height: 70rpx;
		width: 200rpx;
	}

	.hand .dataInfo .dataList text.activite {
		background-color: grey;
		color: #fff;
	}

	.main {
		border: 1px solid #bcbcbc;
		height: 200px;
	}

	.main .htmlContent,
	.cssContent,
	.jsContent,
	.reactContent,
	.vueContent text {
		font-size: 40rpx;
		color: #0F254E;
		display: block;
		padding: 20rpx;
	}
</style>
babyxuqian
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp 顶部tab切换菜单
03-16
4. **事件监听**：为每个tab按钮添加点击事件监听器，通常使用`@tap`，并在事件处理函数中切换`currentTab`值，以反映当前选中的tab。 5. **条件渲染**：根据`currentTab`的值，使用Vue的`v-if`或`v-show`指令动态...
uniapp实现tabs切换（可滑动）
不会写代码的前端
08-14 9746
uniapp 实现tabs切换
uniapp中常用tab栏切换和改变对应内容
热门推荐
weixin_45803990的博客
11-01 2万+
<view class="recommend" v-for="(item,index) in list" :key="item" > <text @tap="changeAct(index)" >{{item}}</text> <view :class="[act==index ? 'active':'']"> </view> </view> <view class="col
uniapp组件之tab选项卡滑动切换功能实现 vue2版本+vue3版本
最新发布
weixin_42220130的博客
06-03 968
uniapp组件之tab选项卡滑动切换功能实现，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧。
uniapp tab切换三种方式（切换内容不同情况下使用）
weixin_50639421的博客
09-14 1万+
uniapp tab切换两种方式（切换内容不同情况下使用） 文章目录**uniapp tab切换两种方式（切换内容不同情况下使用）**一、tabs切换两种方式（切换内容不同情况下使用）1.直接拆开使用（建议tab项比较少使用）2.使用scroll-view滑动 一、tabs切换两种方式（切换内容不同情况下使用） 1.直接拆开使用（建议tab项比较少使用） <template> <view> <view class="head-nav"> <view
uniapp之简单版本的自定义tab栏切换
HQ\(^o^)/的博客
11-24 3127
最开始使用的是uniapp官网里面的这个属性实现 tab栏切换，但奈何，抵不过业务上的需求，只能 自己手写 tab栏切换需求是：在某个背景色为黑色的情况下，里面加个tab栏切换，既然背景色为黑色，那字体肯定是要设置为白色的，但，我直接在 组件上设置 color 属性，但奈何它不生效，一气之下只能在组件文件里面更改字体 color 属性，嗯，问题解决了，但，不曾想另一个白色页面也需要设置tab栏切换，
uni_app组件实现tab选项卡滑动切换，支持默认选中，vue3+ts+setup
u012941592的博客
09-23 4054
最近开发小程序，需要用到tabs组件，在标签多的时候，可以左右滑动。tabs接受的参数props，tablist是父组件传递过来的tab数组，defaultsSelectIndex默认选中的第几个tab。主要能力：选中的tab会自动移动到组件的中间位置，支持默认选中第几个tab，可联动获取数据，支持和swiper联动使用。希望本篇文章对你有所帮助，我也是根据自己的需求封装的，你也可以根据自己的需求在该代码上进行优化。select选中的tab暴露给父组件的方法。主要方法：scroll-view。
小程序顶部tab页点击切换案例
01-22
在顶部Tab页的设计中，通常会使用`app.json`中的`tabBar`配置来定义这些页面。`tabBar`允许开发者设置底部或顶部的Tab栏，包括文字、图标、颜色等样式，并指定对应的页面路径。 实现顶部Tab页点击切换的核心在于...
Vue tab栏切换案例
07-17
Vue提供多种实现Tab切换的方式，包括使用内置组件、第三方库如Vuetify、Element UI，或者自定义实现。本案例将主要讨论如何使用Vue的基本功能和组件来实现Tab栏切换。 首先，我们需要了解Vue的`v-if`和`v-show`指令...
几种tab切换详解
12-10
tab切换</title> <style type="text/css"> * {padding: 0;margin: 0;} li {list-style: none;} .wrapper { margin: 0 auto; width: 100%; max-width: 1140px; } .tabbox { margin: 40px auto;...
uniapp制作简单的tab切换
weixin_54721820的博客
02-29 2974
Uniapp作为一款跨平台的开发工具，提供了一种简便的制作tabbar滑动切换的方法。本文将介绍UniAPP如何实现tabbar滑动切换，并带有详细的示例代码。
uniapp 动态组件 实现Tabs标签切换组件
tengyuxin的博客
04-06 5823
拿作为案例，它的tabs标签有很多，如：推荐、小说、儿童等等。用户点击小说就会切换到小说组件，如果仔细看第一次是有一个加载的过程，如果你再返回到推荐页，再次点击小说时就没有加载过程，而是直接显示出来。这就有两个知识点（1）动态组件切换 （vue3 中 component组件 is属性）（2）保持组件被移除时的状态（vue3 中是 KeepAlive）
uniapp - 简单版本自定义tab栏切换
weixin_54721820的博客
12-11 3177
【代码】uniapp-简单版本自定义tab栏切换。
uniapp 左右滑动切换页面并切换tab
m0_58135258的博客
08-10 6987
uniapp 左右滑动切换页面并切换tab
uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
weixin_51002293的博客
11-05 4336
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
【uniapp tabs标签组件】移动端tabs标签组件，点击标签滚动到中间位置，点击标签横向滚动显示完全【复制即用】
seeeeeeeeeee的博客
03-20 3151
这个tabs功能是很多移动端项目都要用的最近我刚好遇到了这个功能因为我们项目不让用uview等组件。所以只能用uniapp自带的组件uni-ui但是问题就是这里没有这种滚动的tabs标签组件用啊。所以万不得已之下，我cv工程师只好动动小手写一个组件了。刚好这里也发出来保存一下，以后在用到可以直接复制了。
uniapp tab切换及tab锚点效果(兼容wx小程序及H5端)
RD_Xiaobai的博客
07-10 1975
H5端tab切换及tab锚点效果小程序端tab切换及tab锚点效果。
uniapp实现选项卡绑定切换、懒加载
ccz80的博客
07-21 3899
首先获取tab点击时的下标传递给list(list里面写了swiperswiper里有个currentcurrent="activeIndex"会自动跳到咱想要的界面）别看“二、”这么多哈都是虚的目的就是把云函数获取的数组传给list-cardlist引用后传给list-item(看看那个云数组有几条？但这样只是拿到了几个并没有真正把数据整到界面上因为咱那个界面是list-card里面写的界面内容--->传给list-card。//这里的@change可是系统的哈。......
uniapp组件之tab选项卡滑动切换
zhanglinsen123的博客
04-01 1万+
tab选项卡滑动切换
在uniapp中实现上部tab点击切换效果
06-02
在uniapp中实现上部tab点击切换效果，可以在页面上定义一个tab组件，然后在tab组件中设置点击事件，切换不同的内容页面。 下面是一个简单的示例代码： ```html <view class="tab"> <view class="tab-item" :...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值