Vue
2023年3月12日

vue-tabs组件封装(适用h5，微信小程序)

作者 admin

前段时间做了一个web小程序项目，业务上有tabs需求，所以咱就开始动手拆分-封装。

父组件：

<template>
	
<div class="content">
	<Tabs class="tabGroup"></Tabs>
</div>
	
</template>

<script>
	
	import Tabs from "../components/tabs/tabs.vue"

	export default {
		components:{
			Tabs,
		},
		data() {
			return {
				
			};
		},
		computed: {
		},
		onLoad(options) {
			
		},
		onShow() {
			
		},
		methods: {

		}
	}
</script>

看子组件：

<template>
<view>
	<scroll-view class="scroll-view_H" scroll-x="true">
		<view class="scroll-view-item_H" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id"
		@click="checkIndex(index)">
		<image :src="tab.icon" v-if="tab.icon" :class="titleIconMap[index]"></image>
		<image :src="tab.active" v-if="tab.active" :class="navIndex==index ? 'activite' :'activiteDisable'">
		</image>
			{{tab.name}}
		</view>
	</scroll-view>

	<div class="tabPanel">
		<!-- 内容切换 -->
		<view class="goods-wrap" v-if="navIndex==0">
			<!-- 拼团goods -->
			
		</view>
		<view class="goods-wrap" v-if="navIndex==1">
			<!-- 商品--goods -->
			
		</view>
		<view class="goods-wrap" v-if="navIndex==2">
			<!-- 套餐--goods -->
			
		</view>
		<view class="goods-wrap" v-if="navIndex==3">
			<!-- 优惠卷--goods -->
			
		</view>
	</div>

</view>

</template>

<script>
	
	
export default {
	components:{
		
	},
	data() {
		return {
			navIndex: 0,
			tabBars: [{
				name: '',
				id: 'guanzhu',
				icon: require('../../../../static//images/groupBuyingList/tab_pintuan.png'),
				active: require('../../../../static//images/groupBuyingList/tab_bottom_bg.png'),
			}, {
				name: '\xa0\xa0\xa0商品',
				id: 'tuijian',
				icon: require('../../../../static//images/groupBuyingList/tab_goods.png'),
				active: require('../../../../static//images/groupBuyingList/tab_bottom_bg.png'),
			}, {
				name: '套餐',
				id: 'tiyu',
				icon: '',
				active: require('../../../../static//images/groupBuyingList/tab_bottom_bg.png'),
			},{
				name: '优惠卷',
				id: 'redian',
				icon: '',
				active: require('../../../../static//images/groupBuyingList/tab_bottom_bg.png'),
			}],
			
		}
	},
	methods: {
		checkIndex(index) {
			// console.log(index)
			this.navIndex = index;
		},
	}
}
</script>

结束

标签Vue

3,697 条评论在 “vue-tabs组件封装(适用h5，微信小程序)”

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注