使用colorui自定义个好看的tabbar

HcwDavid12

已于 2022-02-12 15:36:05 修改

阅读量941

点赞数

文章标签： vue.js javascript 前端

于 2022-02-12 15:33:31 首次发布

本文链接：https://blog.csdn.net/HcwDavid12/article/details/122897140

版权

定义tabbar组件
页面中引用该组件
隐藏原有的tabbar

tabbar组件

<template>
	<view>
		<view class="cu-bar tabbar bg-white pos-bottom">
			<view class="action" @click="setTab(item)" v-for="(item,index) in tabbar" :key="index" :class="{'text-green':tabIndex == index,'text-gray add-action':item.center}">
				<view v-if="item.center">
					<button class="cu-btn cuIcon-add bg-orange shadow"></button>
				</view> 
				<view :class="item.icon" v-else></view> {{item.text}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				index: 0,
				tabbar: [{
						icon: "cuIcon-homefill",
						text: "首页",
						page: "../index/index",
						center: false
					},
					{
						icon: "cuIcon-myfill",
						text: "我的",
						page: "../home/home",
						center: false
					},
				],
			}
		},
		name: 'tabbar',
		computed: {

		},
		props: {
			tabIndex: {
				type: Number,
				default: 0
			}
		},
		mounted() {
			this.index = this.tabIndex;
		},
		methods: {
			setTab(item) {
				uni.switchTab({
					url:item.page
				})
			}
		}
	}
</script>

<style>
</style>
另外还需要在App.vue中改它一点样式
.pos-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

在首页和我的主页中用它

引用之前需要在main.js中把它挂载到vue上
// 载入tabbar
import tabbar from 'pages/comporents/tabbar.vue'
Vue.component('tabbar', tabbar)

首页中：
<tabbar tabIndex="0"></tabbar>
我的中：
<tabbar tabIndex="1"></tabbar>

隐藏原有的tabbar

这里有两种方式
1  App.vue中
onLaunch: function() {
	console.log('App Launch')
		// 隐藏tabbar
		// uni.hideTabBar()
	}

2  pages.json中
"tabBar": {
		// 自定义tabbar 隐藏它
		"custom": true,
		...
	}

tip：
推荐使用第二种隐藏原有的tabbar，onLaunch中隐藏还是有时候会闪现一下原有的tabbar