tabbar组件

javascript 复制代码

<template>
	<u-tabbar :value="tab" @change="changeTab" :fixed="true" :border="true" :placeholder="true"
		:safeAreaInsetBottom="true">
		<u-tabbar-item text="消息" icon="chat" badge="3"></u-tabbar-item>
		<u-tabbar-item text="">
			<image style="width: 80rpx;height: 80rpx;" slot="active-icon" src="../static/wallet.png"></image>
			<image style="width: 80rpx;height: 80rpx;" slot="inactive-icon" src="../static/wallet.png"></image>
		</u-tabbar-item>
		<u-tabbar-item text="设置" icon="setting"></u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		props: {
			tab: {
				type: Number,
				require: true
			},
		},
		data() {
			return {
				list: ["/pages/message/index", '/pages/home/index', "/pages/set/index"]
			}
		},
		methods: {
			changeTab(name) {
				console.log(88, name)
				uni.reLaunch({
					url: this.list[name]
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>

main.js全局组件注册

javascript 复制代码

import tabbar from './components/tabbar.vue'
Vue.component('tabbar', tabbar)

主页面使用

在三个主页面分别引入组件
传入对于的索引即可

javascript 复制代码

<!-- 自定义底部-->
<tabbar :tab="1"></tabbar>