兰州建设网站的网站东莞电子网站建设
在开发一些业务场景时候，可能需要切换标签栏来展示不同的信息列表。
为此开发了一个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》免费获取！
欢迎大家点赞、收藏、关注哦！