效果如下

 封装tabbar.vue        

<template>
	<view class="tabbar">
		<u-tabbar style="color: red;" :value="currentTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
			zIndex='1000'>
			<u-tabbar-item text="首页" icon="home" name="index" @click="handTab(0)" />
			<u-tabbar-item text="放映厅" icon="photo" name='activity' />
			<u-tabbar-item text="直播" icon="play-right" name='community' />
			<u-tabbar-item text="消息" icon="chat" :badge="12" name="message" @click="handTab(3)" />
			<u-tabbar-item text="我的" icon="account" name="user" @click="handTab(4)" />
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "TabBar",
		props: {
			currentTab: {
				type: String,
				default: 'index'
			}
		},
		data() {
			return {
				switchTab: [
					"/pages/index/index",
					"/pages/activity/activity",
					"/pages/community/community",
					"/pages/message/message",
					"/pages/user/user"
				]
			}
		},
		methods: {
			handTab(index) {
				uni.switchTab({
					url: this.switchTab[index]
				})
			}
		}
	}
</script>

index.vue中引用

<template>
    <view>
        <view>
            主体内容
        <view>
		<tabbar currentTab='index' />
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue"

	export default {
		components: {
			tabbar,
		},
    }
</script>

 pages.json 中配置 （注：可不配置tabBar当成普通页面进行使用也是可以的）

	"tabBar": {
		"custom": true,
		"list": [{
				"pagePath": "pages/index/index"
			}, {
				"pagePath": "pages/activity/activity"
			},
			{
				"pagePath": "pages/community/community"
			},
			{
				"pagePath": "pages/message/message"
			},

			{
				"pagePath": "pages/user/user"
			}
		]
	}

注：app可能会导致原生tabbar占位问题，如下图所示

 只需要在app.vue中添加以下代码即可隐藏原生tabbar

        onLaunch() {
            uni.hideTabBar()
        }