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

基于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》免费获取!

欢迎大家点赞、收藏、关注哦!


http://www.kler.cn/a/587517.html

相关文章:

  • STM32驱动代码规范化编写指南(嵌入式C语言方向)
  • 【解决】XCode不支持旧版本的iOS设备
  • Node.js 的模块作用域和 module 对象详细介绍
  • 蓝桥杯备考:堆算法之最小函数值
  • Python开发合并多个PDF文件
  • 系统可观测性(5)OpenTelemetry基础使用
  • 三分钟掌握视频剪辑 | 在 Rust 中优雅地集成 FFmpeg
  • JavaScript性能优化全面指南
  • pywinauto自动安装python和java
  • DaVinci Resolve(达芬奇)快捷键大全
  • MySQL中的回表是什么?
  • Gin(后端)和 Vue3(前端)中实现 Server-Sent Events(SSE)推送
  • [Jenkins] 即将关闭,剩余生成将不会被执行问题解决
  • 支付宝小程序评论提升策略:打造高互动度的用户体验
  • 【NLP】 3. Distributional Similarity in NLP(分布式相似性)
  • 责任链模式如何减少模块之间的耦合
  • starrocks批量启停脚本
  • 生成对抗网络——pytorch与paddle实现生成对抗网络
  • WordPress顶部菜单自定义的方法
  • 酒店宾馆IPTV数字电视系统:创新宾客体验,引领智慧服务新潮流