在開發一些業務場景時候，可能需要切換標簽欄來展示不同的信息列表。
為此開發了一個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》免費獲取！
歡迎大家點贊、收藏、關注哦！
)
)
