当前位置：首页 > article >正文

基于Uniapp开发tab选项卡/标签栏前端组件

article 2025/3/16 22:24:14

在开发一些业务场景时候，可能需要切换标签栏来展示不同的信息列表。

为此开发了一个Uniapp组件（myTab），下面为组件的展示效果：

案例代码：

<template>
	<view class="content">
		<mytab :list="myList" name="category" :current="current" @change="handleChange"></mytab>
		<view>
			<view v-for="(item,index) in myList[current].picList" style="float:left;width:300rpx;height:200rpx;border-radius:20rpx;margin-left:30rpx;overflow:hidden;margin-top:30rpx">
				<image :src="item" style="width:300rpx;height:200rpx;" mode="aspectFill">
					
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				current:0,
				myList:[
					{
						category:"风景",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142758A072.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142755A071.jpg"
						]
					},
					{
						category:"二次元",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A069.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A070.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A068.jpg",
						]
					},
					{
						category:"电影",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122925A066.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122912A061.jpg"
						]
					},
					{
						category:"唯美",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122854A051.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122854A048.jpg"
						]
					},
					{
						category:"动画",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122853A042.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122853A043.jpg"
						]
					},
					{
						category:"蜡笔小新",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122853A041.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122853A040.jpg"
						]
						
					},
					{
						category:"欧美",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2024/09/26/20240926091801A118.jpg",
							"https://bzadmin.ajiexcx.cn/img/2024/09/07/20240907172005A031.jpg"
						]
						
					},
					{
						category:"IOS"
					}
				]
			}
		},
		onLoad() {

		},
		methods: {
			handleChange(index){
				console.log("选择了：",index)
				this.current = index;
			}
		}
	}
</script>

<style>
	page{
		padding: 30rpx;
		box-sizing: border-box;
	}
	.content {
	}
</style>

案例代码说明：

1、mytab为自己创建的组件，本页面直接使用该组件。

改组件有几个属性和事件动作，分别为name、current、@change事件，其中name代表着集合中对象属性名称，current为当前选中的选项索引（可以默认设置为0），@change事件为item 切换时的回调函数

2、本案例利用mytab组件实现点击不同的标签栏来显示不同的壁纸图片，本页面用myList集合数据来模拟后端传输过来的数据，其中这个集合的每个元素代表着每个标签页的信息，category属性存储标签栏的名称，picList属性存储每个标签页的壁纸图片集合，myList数据如下：

myList:[
				   {
						category:"风景",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142758A072.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142755A071.jpg"
						]
					},
					{
						category:"二次元",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A069.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A070.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/11/20250311142754A068.jpg",
						]
					},
					{
						category:"电影",
						picList:[
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122925A066.jpg",
							"https://bzadmin.ajiexcx.cn/img/2025/03/08/20250308122912A061.jpg"
						]
					}
]

故此，利用current来获取不同标签栏的壁纸图片集合，current为当前标签页的索引

<view v-for="(item,index) in myList[current].picList" >
		<image :src="item" style="width:300rpx;height:200rpx;" mode="aspectFill">
					
		</image>
</view>

3、本案例的项目结构：