smart-app/components/tabber/tabber.vue

<!-- 自定义底部导航栏 -->
<template >
	<view class="cu-bar tabbar bg-white shadow foot solid-top " style="padding: 0 10px;">
         <view v-for="(item,index) in tabber" :key="item.text" v-if="index!=2" class="action " @click="navTo(item)">
         	<view v-if="pagePath==item.pagePath">
				<view>
					<image :src="item.selectedIconPath" class="imagetype"></image>
				</view> 
				<view  v-if="index==1 && item.num!=0 || index==3 && item.num!=0" class="cu-tag badge text-yellow" :class="item.num > 99 ?'text_yuangs':'text_yuang'">
					<text v-if="item.num > 99">99+</text>
					<text v-else>{{item.num}}</text>
				</view>
				<view v-if="item.red" class="cu-tag badge bg-red" style="left: 112rpx;">
					
				</view>
				<text class="text-red">{{item.text}}</text>
			</view>
			<view v-else>
				<view>
					<image :src="item.iconPath" class="imagetype"></image>
				</view> 
				<view  v-if="index==1 && item.num!=0 || index==3 && item.num!=0" class="cu-tag badge text-yellow" :class="item.num > 99 ?'text_yuangs':'text_yuang'">
					<text v-if="item.num > 99">99+</text>
					<text v-else>{{item.num}}</text>
				</view>
				<view v-if="item.red" class="cu-tag badge bg-red" style="left: 112rpx;">
					
				</view>
				<text class="text-black">{{item.text}}</text>
			</view>
         </view>
       <!--  <view v-else style="padding: 0 15px;">
         	<button class="cu-btn cuIcon-voicefill text-blue" style="border-radius: 50%;width: 82rpx;height: 82rpx;background-color: #fff;border: 2rpx solid #e3e1e1;font-size: 42rpx;"></button>
         </view>    -->
    </view>
</template>

<script>
	export default {
		props: {
			pagePath: ""
		},
		data() {
			return {
               tabber:[
				   {
				   		"pagePath": "/pages/index/index",
				   		"iconPath": "/static/menu/index-gray.png",
				   		"selectedIconPath": "/static/menu/index.png",
				   		"text": "首页"
				   	},
				   	{
				   		"pagePath": "/pages/task/task",
				   		"iconPath": "/static/menu/task-gray.png",
				   		"selectedIconPath": "/static/menu/task.png",
				   		"text": "任务",
						"num":this.tabberData.taskNum
				   	},
				   	{
				   		"pagePath": "/pages/voice/voice",
				   		"iconPath": "/static/img/tabbar/yuyin.png",
				   		"selectedIconPath": "/static/img/tabbar/yuyin.png"
				   	},
				   	{
				   		"pagePath": "/pages/information/information",
				   		"iconPath": "/static/menu/information-gray.png",
				       	"selectedIconPath": "/static/menu/information.png",
				   		"text": "消息",
						"num":this.tabberData.newsNum
				   	},
				   	{
				   		"pagePath": "/pages/user/user",
				   		"iconPath": "/static/menu/my-gray.png",
				   		"selectedIconPath": "/static/menu/my.png",
				   		"text": "我的",
						"red":this.tabberData.newVersion
				   	}
			   ]
			};
		},
		mounted() {
			
		},
		methods:{
			navTo(item){
				uni.reLaunch({
					url:item.pagePath
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.imagetype{
		width:50rpx;
		height: 50rpx;
		margin-bottom: 8rpx;
	}
	.cu-tag.badge:not([class*="bg-"]) {
	    background-color: #EF9D1E;
	}
	.text_yuangs{width: 54rpx;height: 38rpx;line-height: 38rpx;text-align: center;border-radius: 50rpx;font-size: 20rpx;}
	.text_yuang{width: 38rpx;height: 38rpx;line-height: 38rpx;text-align: center;border-radius: 50%;font-size: 20rpx;}
</style>