v3-lab-xcx/component/tabBar.vue

<!-- 底部导航组件 -->
<template>
	<view class="tabBar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tab-bar-box">
			<view class="null-box"></view>
			<view class="tba-bar-min-box" @click="tabBarGoPage(1)">
				<img src="@/images/basicsModules/btn_sy_xz.png" v-if="currentRoute == 'pages/home'">
				<img src="@/images/basicsModules/btn_sy_zc.png" v-else>
				<view :class="currentRoute == 'pages/home'?'primary':''">首页</view>
			</view>
			<view class="null-box"></view>
			<view class="tba-bar-min-box" @click="tabBarGoPage(2)">
				<img src="@/images/basicsModules/btn_xx_xz.png" v-if="currentRoute == 'pages/information/information'">
				<img src="@/images/basicsModules/btn_xx_zc.png" v-else>
				<view class="tip" v-if="totalCount!=0">{{totalCount}}</view>
				<view :class="currentRoute == 'pages/information/information'?'primary':''">消息</view>
			</view>
			<view class="null-box"></view>
			<view class="tba-bar-min-box" @click="tabBarGoPage(3)">
				<img src="@/images/basicsModules/btn_wd_xz.png" v-if="currentRoute == 'pages/mine'">
				<img src="@/images/basicsModules/btn_wd_zc.png" v-else>
				<view :class="currentRoute == 'pages/mine'?'primary':''">我的</view>
			</view>
			<view class="null-box"></view>
		</view>
	</view>
</template>

<script>
 import { infoTotalCount } from '@/api/apiDemo/index.js'
	export default {
		data() {
			return {
				paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
				currentRoute:"",
				userType:"",
				totalCount:0,
			}
		},
		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;
			            }
			        })
			    }
			});
		},

		onShow(){
			this.getTotalList();
		},
		mounted(){

			this.getTotalList();
			this.totalCount=uni.getStorageSync('totalCount')
            // 获取当前路由
            let pages = getCurrentPages();
            let page = pages[pages.length - 1];
            this.currentRoute = page.route;
            // 获取当前角色
			this.userType = uni.getStorageSync('userType');
		},
		methods: {
			//获取消息总数接口
			async getTotalList(){
				const {data} = await infoTotalCount();
				if(data.code==200){
					this.totalCount=data.data.totalCount
				}

			},
            tabBarGoPage(type){
                if(type === 1){
                    if (this.currentRoute !== 'pages/home/home') {
                        uni.redirectTo({
                            url: '/pages/home/home',
                        });
                    }
				}else if(type === 2){
                    if (this.currentRoute !== 'pages/information/information') {
                        uni.redirectTo({
                            url: '/pages/information/information',
                        });
                    }
                }else if(type === 3){
                    if (this.currentRoute !== 'pages/mine/mine') {
                        uni.redirectTo({
                            url: '/pages/mine/mine',
                        });
                    }
                }

			},
		}
	}
</script>

<style lang="stylus" scoped>
	.tabBar{
		z-index:9999;
		width:100%;
		height:98rpx;
		background:#ffffff;
		position fixed
		bottom:0;
		left:0;
		box-shadow: 0 -3rpx 13rpx 0 rgba(0, 0, 0, 0.1);
		.tab-bar-box{
			display flex;
			.null-box{
				flex:1;
			}
			.tba-bar-min-box{
				width:64rpx;
				position :relative;
				img{
					width:44rpx;
					height:44rpx;
					margin:14rpx auto 0;
				}
				view{
					line-height:37rpx;
					font-size:19rpx;
					text-align center;
					color:#666666;
				}
				.tip{
					display inline-block;
					background :#EF0909;
					border-radius 50%;
					position :absolute;
					font-size 24rpx;
					line-height 24rpx;
					color #fff;
					top :10rpx;
					left :44rpx;
					padding:6rpx 10rpx;
					box-sizing border-box;
				}
			}
		}
	}
</style>