uniapp里自定义底部导航demo效果（整理）

1、效果图：

2、先在components里创建一个tabbar.vue

具体文件代码：tabbar.vue

<template>
	<!-- 底部导航 -->
	<view class="tabbar" :style="{
     
     'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
			<view class="column-me row-center" v-if="current == index">
				<image class="item-img" :src="item.iconPath" :class="{
     
     'cenImg' : index == 2}"></image>
				<view class="text-item-x">{
   
   {item.text}}</view>
			</view>
			<view class="column-me row-center" v-else>
				<image class="item-img1" :src="item.icon" :class="{
     
     'cenImg' : index == 2}"></image>
				<view class="text-item-n">{
   
   {item.text}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
      
      
		props: {
      
      
			current: String
		},
		data() {
      
      
			return {
      
      
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list: [{
      
      
						text: '首页',
						icon: '../static/navImg/btn_home_n.png', //未选中图标
						iconPath: '../static/navImg/btn_home_s.png', //选中图片
						path: "/pages/index/index", //页面路径
					},
					{
      
      
						text: '处方',
						icon: '../static/navImg/btn_chufang_n.png', //未选中图标
						iconPath: '../static/navImg/btn_chufang_s.png', //选中图片
						path: "/pages/index/recipe", //页面路径
					},
					{
      
      
						text: '快速接诊',
						icon: '../static/navImg/btn_mess_n.png', //未选中图标
						iconPath: '../static/navImg/btn_mess_n.png', //选中图片
						path: "/pages/index/reception", //页面路径
					},
					{
      
      
						text: '消息',
						icon: '../static/navImg/btn_mess_s_n.png', //未选中图标
						iconPath: '../static/navImg/btn_mess_s.png', //选中图片
						path: "/pages/index/message", //页面路径
					},
					{
      
      
						text: '我的',
						icon: '../static/navImg/btn_me_n.png', //未选中图标
						iconPath: '../static/navImg/btn_me_s.png', //选中图片
						path: "/pages/index/my", //页面路径
					}
				]
			};
		},
		created() {
      
      
			let that = this;
			uni.getSystemInfo({
      
      
				success: function(res) {
      
      
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
      
      
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
      
      
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		watch: {
      
      

		},
		methods: {
      
      
			tabbarChange(path) {
      
      
				// uni.switchTab({
      
      
				// 	url: path
				// })
				console.log(path, 'pathpath')
				this.$.open_tab(path)
			}
		}
	};
</script>

<style scoped>
	.tabbarActive {
      
      
		color: #79D5AD !important;
	}

	.tabbar {
      
      
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		/* z-index: 99; */
	}

	.tabbar-item {
      
      
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		font-size: 20rpx;
	}
	.column-me {
      
      
		display: flex;
		flex-direction: column;
	}
	.row-center {
      
      
		align-items: center;
	}

	.text-item-x {
      
      
		color: #215AA0;
	}

	.text-item-n {
      
      
		color: #6D7984;
	}

	/* 选中后 */
	.item-img {
      
      
		width: 50rpx;
		height: 50rpx;
	}

	/* 选中前 */
	.item-img1 {
      
      
		width: 50rpx;
		height: 50rpx;
	}

	/* 中间图片高度 */
	.cenImg {
      
      
		width: 88rpx !important;
		height: 88rpx !important;
		margin-top: -34rpx;
	}
</style>

3. 重要的一步，在引用tabbar之前，先到pages.json里配置一下tabbar的基本路径，只需要路径就 行
   
   4.在要使用的底部导航页面引用 …/…/components/tabbar.vue。
   具体代码

<template>
    <view>
    	<!-- :current="'0'"	第一个选中 -->
        <Tabbar :current="'0'"></Tabbar>
    </view>
</template>
 
<script>
    import Tabbar from '@/components/tabbar.vue'
    export default {
      
      
        components: {
      
      
            Tabbar
        }, 
        onShow() {
      
      
            uni.hideTabBar({
      
      
                animation: false
            })
        },
    }
</script>