使用uniapp开发时自定义tabbar

预览图：

一、配置page.jsong中的tabbar（这一步是必须的，因为我们在使用uni.switchTab()时必须要用到）

javascript 复制代码

"tabBar": {
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/images/icon/home.png",
			"selectedIconPath": "static/images/icon/home_select.png",
			"text": "首页"
		}, {
			"pagePath": "pages/OldGoods/OldGoods",
			"iconPath": "static/images/icon/home.png",
			"selectedIconPath": "static/images/icon/home_select.png",
			"text": "二手"
		},{
			"pagePath": "pages/list/list",
			"iconPath": "",
			"selectedIconPath": "",
			"text": "权益"
		},{
			"pagePath": "pages/IntegralMall/IntegralMall",
			"iconPath": "",
			"selectedIconPath": "",
			"text": "积分商城"
		},{
			"pagePath": "pages/me/me",
			"iconPath": "static/images/icon/me.png",
			"selectedIconPath": "static/images/icon/me_select.png",
			"text": "我的"
		}]
	}

二、编写tabbar组件

view:

html 复制代码

<view class="tab-bar">
		<view class="center-btn-box">
			<view class="center-btn" @click="SwitchTab('/pages/list/list',2)">
				<image class="center-icon" src="../../static/images/label/cent_btn.png"></image>
			</view>
		</view>
		<view class="tab-list">
			<view :class="['tab-item',pageindex===index?'action':'']" v-for="(item,index) in list" @click="SwitchTab(item.path,index)">
				<view class="tab-icon">
					<image :src="pageindex===index?item.iconAction:item.icon" class="icon"></image>
				</view>
				<view class="tab-name">{{item.title}}</view>
			</view>
		</view>
	</view>

css:这里就省略了，我中间那个其实就是用一个元素把中间那个选项给遮挡住，点击时使用uni.switchTab()仅此而已

js:我这里使用props属性的方式传值，因为点击时要做页面状态的切换，

javascript 复制代码

props:{
			pageindex:Number
		},
		name:"TabBar",
		data() {
			return {
				list:[
					{
						title:"首页",
						icon:"../../static/images/label/tab_sy_01.png",
						iconAction:"../../static/images/label/tab_sy_02.png",
						path:"/pages/index/index?id=0"
					},
					{
						title:"二手",
						icon:"../../static/images/label/tab_es_01.png",
						iconAction:"../../static/images/label/tab_es_02.png",
						path:"/pages/OldGoods/OldGoods"
					},{
						title:"权益",
						icon:"../../static/images/label/tab_qy_01.png",
						iconAction:"../../static/images/label/tab_qy_02.png",
						path:"/pages/list/list"
					},{
						title:"积分商城",
						icon:"../../static/images/label/tab_jf_01.png",
						iconAction:"../../static/images/label/tab_jf_02.png",
						path:"/pages/IntegralMall/IntegralMall"
					},{
						title:"我的",
						icon:"../../static/images/label/tab_wd_01.png",
						iconAction:"../../static/images/label/tab_wd_02.png",
						path:"/pages/me/me"
					}
				]
			};
		},

使用组件：

html 复制代码

<template>
    <TabBar :pageindex="0"></TabBar>
</template>
<script>
    import TabBar from "@/components/TabBar/TabBar.vue"
    export default {
		components:{
			TabBar
		}
    }
</script>