微信小程序tab切换

最新推荐文章于 2024-04-13 11:35:17 发布

Ylk_IT

最新推荐文章于 2024-04-13 11:35:17 发布

阅读量282

点赞数

本文链接：https://blog.youkuaiyun.com/Ylk_manong/article/details/119249597

版权

本文介绍了如何在微信小程序中使用vue2进行tab切换。主要内容包括父组件的数据请求和方法，以及子组件的结构和方法，旨在帮助开发者实现灵活的tab切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序tab切换(vue2)写法：

父组件：请求数据

<!-- tobar -->
		<view>
			<my-tabs :tabs="tabs" :defaultIndex="defaultIndex" @tabClick="tabClick"/>
		</view>

父组件方法：


export default {
		data() {
			return {
				tabs:[],
				defaultIndex:0,
			};
		},
		methods:{
			//监听到的子组件的点击tab事件
			tabClick(index){
				this.defaultIndex=index
			}
		}
	}

子组件：

	<view class="tab-item" :class="index===defaultIndex  ? 'active' : ''" @click="tabClick(index)">
			{{item.label}}		//请求数据的item
	</view>

子组件方法：

export default {
		props:{		//接受父组件的数据
			tabs:{
				type:Array,
				default:()=>{
					return []
				}
			},
			//父组件传过来的  单项数据流
			defaultIndex:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			tabClick(index){
				this.$emit('tabClick',index)
				
			}
		}
	}