基于Uniapp开发tab选项卡/标签栏前端组件
在开发一些业务场景时候,可能需要切换标签栏来展示不同的信息列表。
为此开发了一个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、本案例的项目结构:
本案例完整源码,可在微信小程序《星梦Blog》免费获取!
欢迎大家点赞、收藏、关注哦!