uni-app切换tabs列表

uni-app实现tabs页面切换

最新推荐文章于 2025-10-08 00:10:38 发布

原创最新推荐文章于 2025-10-08 00:10:38 发布 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#web app #vue.js

本文介绍了如何在uni-app中实现tabs页面之间的切换，详细讨论了相关vue.js组件的使用和配置，帮助开发者理解在web app开发中的多页面管理。

<template>
	<view class="alarmList">
		<view class="switchHead">
			<view v-for="(item,index) in tabTitleData" class="boxList" :class="{activeCss:activeIndex==index}" :key="index">
				<text @click="clickTab(index)">{{item.name}}</text>
			</view>
		</view>
		<uni-list>
		    <uni-list-item title="标题文字" note="描述信息"></uni-list-item>
		    <uni-list-item title="标题文字" note="描述信息" ></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	export default {
		data() {
			return {
				activeIndex:'0',
				tabTitleData:[
					{
						name:'所有信息'
					},
					{
						name:'已处理'
					},
					{
						name:'未处理'
					}
				]
			}
		},
		components: {uniList,uniListItem},
		methods: {
			clickTab(index){
				this.activeIndex=index;
			}
		}
	}
</script>

<style>
	.alarmList {
		font-size: 14px;
		height: 100%;
	}
	.alarmList .switchHead{
		height: 35px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		color: #FFFFFF;
		background-color: #13D1BE;
	}
	.alarmList .switchHead .boxList{
		height: 100%;
	}
	.alarmList .switchHead .activeCss{
		border-bottom: 2px solid yellow;
		color: yellow;
	}
</style>

结果展示
在这里插入图片描述