min-shenze-applet-master/components/common/k-tabbar/k-tabbar.vue

<template>
	<!-- 底部导航栏 -->
	<u-tabbar class="u-tabbar" :fixed="fixed" :placeholder="placeholder" :safeAreaInsetBottom="safeAreaInsetBottom"
		:value="$S_tabbar_tabIdx" @change="tabChg">
		<u-tabbar-item v-for="item in tabList" :key="item.id" :text="item.name" :icon="item.icon"></u-tabbar-item>
	</u-tabbar>
</template>

<script>
	/**
	 * tabbar 底部导航栏
	 * @description 本组件主要是对uview的tabbar的二次封装。
	 * 
	 * @property {Boolean}			fixed				是否固定在底部 （默认 true ）
	 * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷 （默认 true ）
	 * @property {Boolean}			safeAreaInsetBottom 是否为iPhoneX留出底部安全距离 （默认 true ）
	 * @property {Array<Object>}	tabList				底部导航栏的数组，用于渲染导航栏数据
	 * 
	 * @event {Function} tabChg			底部导航栏切换 
	 */
	export default {
		props: {
			fixed: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: Boolean,
				default: true
			},
			safeAreaInsetBottom: {
				type: Boolean,
				default: true
			},
			tabList: {
				type: Array,
				default: [{
						name: '首页',
						icon: 'home',
						id: 1
					},
					{
						name: '购物车',
						icon: 'car',
						id: 2
					},
					{
						name: '我的',
						icon: 'account',
						id: 3
					}
				]
			}
		},
		computed: {
			$S_tabbar_tabIdx() {
				return this.$store.state.common.$S_tabbar_tabIdx || 0;
			}
		},
		methods: {
			// 底部导航栏切换
			tabChg(e) {
				// 如果存在vuex
				if (this.$store) {
					// 操作vuex改变数据（这个方法可以根据自己需要改动）
					this.$store.dispatch('ACTI_TABIDX', e);
				}
				// 向父组件传递数据
				this.$emit('tabChg', e);
			}
		}
	};
</script>