解决冲突

config.js

@@ -72,7 +72,12 @@ var config = {
 	// 升级公告更新阅读
 	updateRead: `${host}/zkMessage/updateFlag`,
 	// 隐私协议
-	privacyAgr: `${host}/zkPrivate/findById`
+	privacyAgr: `${host}/zkPrivate/findById`,
+	//首页更新弹框
+	updatePopup: `${host}/zkMessage/showMessage`,
+	//首页首次更新弹框
+	firstShowPopup: `${host}/zkMessage/firstShow`,
+	
 	}
 };
 module.exports = config;

pages.json

@@ -551,28 +551,28 @@
 		"selectedColor": "#1296db",
 		"borderStyle": "white",
 		"list": [{
-				"pagePath": "pages/index/index",
-				"iconPath": "/static/images/tabBar/home.png",
-				"selectedIconPath": "/static/images/tabBar/homeActive.png",
-				"text": "首页"
+				"pagePath": "pages/index/index"
+				// "iconPath": "/static/images/tabBar/home.png",
+				// "selectedIconPath": "/static/images/tabBar/homeActive.png",
+				// "text": "首页"
 			},
 			{
-				"pagePath": "pages/index/customer",
-				"iconPath": "/static/images/tabBar/customer.png",
-				"selectedIconPath": "/static/images/tabBar/customerActive.png",
-				"text": "接待"
+				"pagePath": "pages/index/customer"
+				// "iconPath": "/static/images/tabBar/customer.png",
+				// "selectedIconPath": "/static/images/tabBar/customerActive.png",
+				// "text": "接待"
 			},
 			{
-				"pagePath": "pages/index/learning",
-				"iconPath": "/static/images/tabBar/voice.png",
-				"selectedIconPath": "/static/images/tabBar/voiceActive.png",
-				"text": "学习"
+				"pagePath": "pages/index/learning"
+				// "iconPath": "/static/images/tabBar/voice.png",
+				// "selectedIconPath": "/static/images/tabBar/voiceActive.png",
+				// "text": "学习"
 			},
 			{
-				"pagePath": "pages/index/personal",
-				"iconPath": "/static/images/tabBar/user.png",
-				"selectedIconPath": "/static/images/tabBar/userActive.png",
-				"text": "个人"
+				"pagePath": "pages/index/personal"
+				// "iconPath": "/static/images/tabBar/user.png",
+				// "selectedIconPath": "/static/images/tabBar/userActive.png",
+				// "text": "个人"
 			}
 		]
 	},

pages/index/customer.vue

@@ -63,13 +63,19 @@
 			src="/static/images/add.png" mode=""></image>
 		<image class="add2" @click="reshCustom()" src="https://static.quhouse.com/zhikong_xcx_img/refresh.png" mode="">
 		</image>
+		<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar>
 	</view>
 </template>
 
 <script>
+	var util = require("../../utils/util.js");
+	var config = require("../../config");
+	import tabbarList from '@/utils/tabbar.js'
 	export default {
 		data() {
 			return {
+				tabbarList:tabbarList,
+				current: 0,
 				buildingID: '',
 				waitCustomList: [],
 				isAdd: '',
@@ -93,8 +99,26 @@
 			console.log(this.menulist)
 			this.init()
 			this.queryHaveDept()
+			this.updateInit()
 		},
 		methods: {
+			updateInit() {
+				uni.request({
+					url: config.service.updateList,
+					method: "GET",
+					data: {
+						id: uni.getStorageSync('weapp_session_userInfo_data').accountId
+					},
+					header: {
+						'content-type': 'application/json',
+						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
+					},
+					success: (res) => {
+						this.count = res.data.data.count
+						this.tabbarList[3].count = res.data.data.count
+					}
+				})
+			},
 			reshCustom() {
 				this.init()
 			},
@@ -402,7 +426,7 @@
 		width: 90upx;
 		height: 90upx;
 		position: fixed;
-		bottom: 180upx;
+		bottom:275upx;
 		right: 44upx;
 	}
 
@@ -410,7 +434,7 @@
 		width: 90upx;
 		height: 90upx;
 		position: fixed;
-		bottom: 60upx;
+		bottom: 160upx;
 		right: 44upx;
 	}
 </style>

pages/index/index.vue

@@ -207,14 +207,40 @@
 				@cancel="cancel" @confirm="confirm"></u-select>
 		</view>
 		<u-calendar v-model="totalTimeShow" mode="range" @change="totalTimeChange"></u-calendar>
+		<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar>
+		<view class="update" v-if="isShowUpdate">
+			<view class="updateBox">
+				<view class="top">
+					<image src="../../static/images/updateIcon.png"></image>
+				</view>
+				<view class="content">
+					<view class="tit">{{tit}}</view>
+					<u-parse class="ql-editor" :content="content" @preview="preview" @navigate="navigate"/>
+					<!-- <rich-text :nodes="content"></rich-text> -->
+				</view>
+				<view class="btn" @click="lookDetail">查看详情</view>
+				<view class="close" @click="close">
+					<u-icon name="close-circle" size="80" color="#FFFFFF"></u-icon>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
 	var config = require("../../config");
+	var util = require("../../utils/util.js");
+	import tabbarList from '@/utils/tabbar.js'
+	import uParse from '../../components/gaoyia-parse/parse.vue'
 	export default {
 		data() {
 			return {
+				id:"",
+				isShowUpdate:false,
+				tit:"",
+				content:"",
+				tabbarList:tabbarList,
+				current: 0,
 				userInfo: {},
 				Showhiddenunits: false,
 				lpanlist: [], //项目列表
@@ -271,7 +297,9 @@
 				}
 			}
 		},
-		components: {},
+		components: {
+		    uParse
+		},
 		onShow() {
 			this.getMenu()
 			
@@ -307,6 +335,7 @@
 			}
 			this.initworkThisWeek()
 			this.initrealTimeStatistics()
+			this.updateInit()
 		},
 		onPullDownRefresh() {
 			this.getMenu()
@@ -347,7 +376,85 @@
 				uni.stopPullDownRefresh()
 			}, 3000)
 		},
+		onLoad() {
+			this.initPopup()
+		},
 		methods: {
+			close(){
+				this.isShowUpdate = false;
+			},
+			lookDetail(){
+				let link = encodeURIComponent(JSON.stringify(this.content))
+				uni.navigateTo({
+					url: "../mine/messageDetail?content=" + link + "&id=" + this.id+"&tit="+this.tit
+				})
+				let data = {
+					id:this.id,
+					accountId:uni.getStorageSync('weapp_session_userInfo_data').accountId
+				}
+				uni.request({
+					url: config.service.updateRead,
+					method: "GET",
+					header: {
+						'content-type': 'application/json',
+						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
+					},
+					data,
+					success: (res) => {
+						this.initPopup()
+					}
+				})
+				this.isShowUpdate = false;
+			},
+			initPopup(){
+				uni.request({
+					url: config.service.updatePopup,
+					method: "GET",
+					header: {
+						'content-type': 'application/json',
+						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
+					},
+					success: (res) => {
+						this.first(res.data.data.id)
+						this.content = res.data.data.content
+						this.tit = res.data.data.title
+						this.aid = res.data.data.accountId
+						this.id = res.data.data.id
+						this.isShowUpdate = res.data.data.readFlag==0?true:false;
+					}
+				})
+			},
+			first(id){
+				uni.request({
+					url: config.service.firstShowPopup,
+					method: "GET",
+					header: {
+						'content-type': 'application/json',
+						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
+					},
+					data:{id},
+					success: (res) => {
+					}
+				})
+			},
+			updateInit() {
+				uni.request({
+					url: config.service.updateList,
+					method: "GET",
+					data: {
+						id: uni.getStorageSync('weapp_session_userInfo_data').accountId
+					},
+					header: {
+						'content-type': 'application/json',
+						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
+					},
+					success: (res) => {
+						this.count = res.data.data.count
+						this.tabbarList[3].count = res.data.data.count
+					}
+				})
+			},
+			
 			//获取权限
 			getMenu(){
 				this.$u.get("/user/getMenu").then(data => {
@@ -641,8 +748,6 @@
 						url: '/pages/center/consumer/index?refresh='+'refresh'
 					});
 				}
-				
-				
 			},
 		},
 
@@ -650,6 +755,64 @@
 </script>
 
 <style lang="scss" scoped>
+	.update{
+		    width: 100%;
+		    height: 100%;
+		    background: rgba(0, 0, 0, 0.5);
+		    position: fixed;
+		    top: 0;
+		    left: 0;
+		    bottom: 0;
+		    right: 0;
+		    z-index: 9999;
+			.updateBox{
+				width: 80%;
+				background: #FFFFFF;
+				position: relative;
+				left: 50%;
+				margin-left: -40%;
+				padding: 20rpx;
+			    border-radius: 10rpx;
+				top: 140rpx;
+				.top{
+					width: 350rpx;
+					height: 220rpx;
+					margin: 0 auto;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+				}
+				.btn{
+					    width: 510rpx;
+					    height: 88rpx;
+					    background: #2671E2;
+					    margin: 0 auto;
+					    display: flex;
+					    justify-content: center;
+					    align-items: center;
+					    font-size: 36rpx;
+					    border-radius: 8rpx;
+					    color: #FFFFFF;
+				}
+				.content{
+					height: 268rpx;
+					overflow-y: auto;
+				    margin: 46rpx 0;
+				}
+				.tit{
+					    font-size: 40rpx;
+					    text-align: center;
+					    font-weight: bold;
+				}
+				.close{
+					position: absolute;
+					bottom: -100rpx;
+					left: 50%;
+				    margin-left: -50rpx;
+				}
+			}
+	}
 	.activecllasscet{
 		font-size: 28rpx;
 		font-weight: 400;

pages/index/learning.vue

@@ -51,15 +51,19 @@
 				</view>
 			</view>
 		</view>
+		<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar>
   </view>
 </template>
 
 <script>
   var config = require("../../config");
   var util = require("@/utils/util.js");
+	import tabbarList from '@/utils/tabbar.js'
   export default {
     data() {
       return {
+		  tabbarList:tabbarList,
+		  current: 0,
 		tablist:[
 			{name:"全文"},
 			{name:"分点"}
@@ -75,6 +79,8 @@
 			var i=uni.getStorageSync('fendianindex') 
 			this.buildingID=uni.getStorageSync('buildingID').id;
 			this.clocktab(i)
+			
+			this.updateInit()
     },
 	onPullDownRefresh() {
 		var i=uni.getStorageSync('fendianindex')
@@ -84,6 +90,24 @@
 		}, 1000);
 	},
     methods: {
+		updateInit() {
+			uni.request({
+				url: config.service.updateList,
+				method: "GET",
+				data: {
+					id: uni.getStorageSync('weapp_session_userInfo_data').accountId
+				},
+				header: {
+					'content-type': 'application/json',
+					'Access-Token': uni.getStorageSync('weapp_session_login_data').token
+				},
+				success: (res) => {
+					this.count = res.data.data.count
+					this.tabbarList[3].count = res.data.data.count
+				}
+			})
+		},
+		
 		//全部学习跳转
 		quclick(item){
 			uni.showLoading({

pages/index/personal.vue

@@ -19,13 +19,14 @@
 					<image src="/static/images/studyhot.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
 					消息
 				</view>
-				<view class="right">
+				<view class="right" style="display: flex;align-items: center;">
+					<view class="count" v-if="count!=0">{{count}}</view>
 					<image src="/static/images/arrow.png" style="width: 18rpx;height: 32rpx;" mode=""></image>
 				</view>
 			</navigator>
 			<navigator class="line" url="/pages/mine/subscribe">
 				<view class="title">
-					<image src="/static/images/studyhot.png" style="width: 36rpx;height: 36rpx;" mode=""></image>
+					<image src="/static/images/studyhot.png" style="width: 36rpx;height: 36rpx;" mode=""></image> 
 					订阅消息
 				</view>
 				<view class="right">
@@ -79,6 +80,7 @@
 			</view>
 
 		</view>
+		<u-tabbar activeColor="#1296db" inactiveColor="#999999" v-model="current" :list="tabbarList"></u-tabbar>
 	</view>
 </template>
 
@@ -86,10 +88,13 @@
 	var app = getApp();
 	var util = require("../../utils/util.js");
 	var config = require("../../config");
+	import tabbarList from '@/utils/tabbar.js'
 
 	export default {
 		data() {
 			return {
+				tabbarList:tabbarList,
+				current: 0,
 				tabList: [
 					{
 						name: '系统消息'
@@ -101,6 +106,7 @@
 				name: "",
 				photo: "",
 				mobile: "",
+				count:0,
 			};
 		},
 		onShow: function() {
@@ -108,8 +114,27 @@
 			this.name = userInfos.name,
 			this.photo = userInfos.picUrl,
 			this.mobile = userInfos.loginName
+			this.updateInit()
 		},
 		methods: {
+			updateInit() {
+				uni.request({
+					url: config.service.updateList,
+					method: "GET",
+					data: {
+						id: uni.getStorageSync('weapp_session_userInfo_data').accountId
+					},
+					header: {
+						'content-type': 'application/json',
+						'Access-Token': uni.getStorageSync('weapp_session_login_data').token
+					},
+					success: (res) => {
+						this.count = res.data.data.count
+						this.tabbarList[3].count = res.data.data.count
+					}
+				})
+			},
+			
 			scan(){
 				uni.navigateTo({
 					url:"../mine/registerCode"
@@ -184,6 +209,18 @@
 	};
 </script>
 <style lang="scss" scoped>
+	.count{
+		background: red;
+		width: 50rpx;
+		height: 50rpx;
+		border-radius: 40rpx;
+		color: #FFFFFF;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 24rpx;
+		margin-right: 20rpx;
+	}
 	.main {
 		padding: 0 30rpx;
 		background: #F8F8F8;

pages/mine/messageDetail.vue

@@ -1,11 +1,10 @@
 <template>
 	<view class="main">
-		<!-- <u-parse class="ql-editor" :content="content" @preview="preview" @navigate="navigate"/> -->
-		
-		
+		<view class="tit">{{tit}}</view>
+		<u-parse class="ql-editor" :content="content" @preview="preview" @navigate="navigate"/>
 		<web-view v-if="webviewShow" :webview-styles="webviewStyles" :src="webviewUrl"></web-view>
 		<!-- <view v-html="content"></view> -->
-		<rich-text :nodes="content"></rich-text>
+		<!-- <rich-text :nodes="content"></rich-text> -->
 	</view>
 </template>
 
@@ -17,6 +16,7 @@
 	export default {
 		data() {
 			return {
+				tit:"",
 				content:"",
 				id:"",
 				webviewShow:false,
@@ -35,6 +35,7 @@
 			this.id = e.id;
 			let link=JSON.parse(decodeURIComponent(e.content))
 			this.content = link
+			this.tit = e.tit
 			this.read()
 		},
 		methods:{
@@ -74,6 +75,12 @@
 	.main{
 		padding: 20rpx;
 		word-wrap: break-word;
+		.tit{
+			    font-size: 46rpx;
+			    font-weight: 800;
+			    text-align: center;
+			    margin-bottom: 16rpx;
+		}
 	}
 .ql-container {
   box-sizing: border-box;

pages/mine/messageList.vue

@@ -5,7 +5,7 @@
 			<view class="upgradeList">
 				<block v-if="updateAnnList.length!=0">
 					<block v-for="(item,index) in updateAnnList" :key="index">
-						<view class="upgradeItem" @click="goDetail(item.content,item.id)">
+						<view class="upgradeItem" @click="goDetail(item.content,item.id,item.title)">
 							<view class="notRead">
 								<view v-if="item.readFlag==0" class="red"></view>
 							</view>
@@ -112,10 +112,10 @@
 					}
 				})
 			},
-			goDetail(text, id) {
+			goDetail(text, id,title) {
 				let link = encodeURIComponent(JSON.stringify(text))
 				uni.navigateTo({
-					url: "./messageDetail?content=" + link + "&id=" + id
+					url: "./messageDetail?content=" + link + "&id=" + id+"&tit="+title
 				})
 			},
 			change(index) {

utils/tabbar.js

@@ -0,0 +1,27 @@
+export default [
+	{
+		pagePath: "/pages/index/index",
+		iconPath: "/static/images/tabBar/home.png",
+		selectedIconPath: "/static/images/tabBar/homeActive.png",
+		text: "首页"
+	},
+	{
+		pagePath: "/pages/index/customer",
+		iconPath: "/static/images/tabBar/customer.png",
+		selectedIconPath: "/static/images/tabBar/customerActive.png",
+		text: "接待"
+	},
+	{
+		pagePath: "/pages/index/learning",
+		iconPath: "/static/images/tabBar/voice.png",
+		selectedIconPath: "/static/images/tabBar/voiceActive.png",
+		text: "学习"
+	},
+	{
+		pagePath: "/pages/index/personal",
+		iconPath: "/static/images/tabBar/user.png",
+		selectedIconPath: "/static/images/tabBar/userActive.png",
+		text: "个人",
+		count: 0
+	}
+];

uview-ui/components/u-tabbar/u-tabbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<view v-if="show" class="u-tabbar" @touchmove.stop.prevent>
+	<view v-if="show" class="u-tabbar" @touchmove.stop.prevent="() => {}">
 		<view class="u-tabbar__content safe-area-inset-bottom" :style="{
 			height: $u.addUnit(height),
 			backgroundColor: bgColor,
@@ -14,19 +14,20 @@
 				<view :class="[
 					midButton && item.midButton ? 'u-tabbar__content__circle__button' : 'u-tabbar__content__item__button'
 				]">
-					<u-icon 
-						:size="midButton && item.midButton ? midButtonSize : iconSize" 
-						:name="index == value ? item.selectedIconPath : item.iconPath"
-						:color="index == value ? activeColor : inactiveColor"
+					<u-icon
+						:size="midButton && item.midButton ? midButtonSize : iconSize"
+						:name="elIconPath(index)"
+						img-mode="scaleToFill"
+						:color="elColor(index)"
 						:custom-prefix="item.customIcon ? 'custom-icon' : 'uicon'"
 					></u-icon>
-					<u-badge :count="item.count" :is-dot="item.isDot" 
-						v-if="item.count > 0"
+					<u-badge :count="item.count" :is-dot="item.isDot"
+						v-if="item.count || item.isDot"
 						:offset="[-2, getOffsetRight(item.count, item.isDot)]"
 					></u-badge>
 				</view>
 				<view class="u-tabbar__content__item__text" :style="{
-					color: index == value ? activeColor : inactiveColor
+					color: elColor(index)
 				}">
 					<text class="u-line-1">{{item.text}}</text>
 				</view>
@@ -34,13 +35,14 @@
 			<view v-if="midButton" class="u-tabbar__content__circle__border" :class="{
 				'u-border': borderTop,
 			}" :style="{
-				backgroundColor: bgColor
+				backgroundColor: bgColor,
+				left: midButtonLeft
 			}">
 			</view>
 		</view>
 		<!-- 这里加上一个48rpx的高度,是为了增高有凸起按钮时的防塌陷高度(也即按钮凸出来部分的高度) -->
-		<view class="u-fixed-placeholder safe-area-inset-bottom" :style="{ 
-				height: `calc(${$u.addUnit(height)} + ${midButton ? 48 : 0}rpx)`,
+		<view class="u-fixed-placeholder safe-area-inset-bottom" :style="{
+				height: `calc(${$u.addUnit(height)} + ${midButton && isBtnTop ? 48 : 0}rpx)`,
 			}"></view>
 	</view>
 </template>
@@ -110,24 +112,83 @@
 				type: Boolean,
 				default: true
 			},
+			// 是否隐藏原生tabbar
+			hideTabBar: {
+				type: Boolean,
+				default: true
+			},
+			// 是否计算凸起位置的高度
+			isBtnTop: {
+				type: Boolean,
+				default: true
+			}
 		},
 		data() {
 			return {
-
+				// 由于安卓太菜了，通过css居中凸起按钮的外层元素有误差，故通过js计算将其居中
+				midButtonLeft: '50%',
+				pageUrl: '', // 当前页面URL
 			}
 		},
+		created() {
+			// 是否隐藏原生tabbar
+			if(this.hideTabBar) uni.hideTabBar();
+			// 获取引入了u-tabbar页面的路由地址，该地址没有路径前面的"/"
+			let pages = getCurrentPages();
+			// 页面栈中的最后一个即为项为当前页面，route属性为页面路径
+			this.pageUrl = pages[pages.length - 1].route;
+		},
+		computed: {
+			elIconPath() {
+				return (index) => {
+					// 历遍u-tabbar的每一项item时，判断是否传入了pagePath参数，如果传入了
+					// 和data中的pageUrl参数对比，如果相等，即可判断当前的item对应当前的tabbar页面，设置高亮图标
+					// 采用这个方法，可以无需使用v-model绑定的value值
+					let pagePath = this.list[index].pagePath;
+					// 如果定义了pagePath属性，意味着使用系统自带tabbar方案，否则使用一个页面用几个组件模拟tabbar页面的方案
+					// 这两个方案对处理tabbar item的激活与否方式不一样
+					if(pagePath) {
+						if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) {
+							return this.list[index].selectedIconPath;
+						} else {
+							return this.list[index].iconPath;
+						}
+					} else {
+						// 普通方案中，索引等于v-model值时，即为激活项
+						return index == this.value ? this.list[index].selectedIconPath : this.list[index].iconPath
+					}
+				}
+			},
+			elColor() {
+				return (index) => {
+					// 判断方法同理于elIconPath
+					let pagePath = this.list[index].pagePath;
+					if(pagePath) {
+						if(pagePath == this.pageUrl || pagePath == '/' + this.pageUrl) return this.activeColor;
+						else return this.inactiveColor;
+					} else {
+						return index == this.value ? this.activeColor : this.inactiveColor;
+					}
+				}
+			}
+		},
+		mounted() {
+			this.midButton && this.getMidButtonLeft();
+		},
 		methods: {
 			async clickHandler(index) {
 				if(this.beforeSwitch && typeof(this.beforeSwitch) === 'function') {
 					// 执行回调，同时传入索引当作参数
-					let beforeSwitch = this.beforeSwitch(index);
+					// 在微信，支付宝等环境(H5正常)，会导致父组件定义的customBack()函数体中的this变成子组件的this
+					// 通过bind()方法，绑定父组件的this，让this.customBack()的this为父组件的上下文
+					let beforeSwitch = this.beforeSwitch.bind(this.$u.$parent.call(this))(index);
 					// 判断是否返回了promise
 					if (!!beforeSwitch && typeof beforeSwitch.then === 'function') {
 						await beforeSwitch.then(res => {
 							// promise返回成功，
 							this.switchTab(index);
 						}).catch(err => {
-							
+
 						})
 					} else if(beforeSwitch === true) {
 						// 如果返回true
@@ -141,7 +202,16 @@
 			switchTab(index) {
 				// 发出事件和修改v-model绑定的值
 				this.$emit('change', index);
-				this.$emit('input', index);
+				// 如果有配置pagePath属性，使用uni.switchTab进行跳转
+				if(this.list[index].pagePath) {
+					uni.switchTab({
+						url: this.list[index].pagePath
+					})
+				} else {
+					// 如果配置了papgePath属性，将不会双向绑定v-model传入的value值
+					// 因为这个模式下，不再需要v-model绑定的value值了，而是通过getCurrentPages()适配
+					this.$emit('input', index);
+				}
 			},
 			// 计算角标的right值
 			getOffsetRight(count, isDot) {
@@ -153,20 +223,29 @@
 				} else {
 					return -30;
 				}
+			},
+			// 获取凸起按钮外层元素的left值，让其水平居中
+			getMidButtonLeft() {
+				let windowWidth = this.$u.sys().windowWidth;
+				// 由于安卓中css计算left: 50%的结果不准确，故用js计算
+				this.midButtonLeft = (windowWidth / 2) + 'px';
 			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
 	.u-fixed-placeholder {
+		/* #ifndef APP-NVUE */
 		box-sizing: content-box;
+		/* #endif */
 	}
 
 	.u-tabbar {
 
 		&__content {
-			display: flex;
+			@include vue-flex;
 			align-items: center;
 			position: relative;
 			position: fixed;
@@ -174,18 +253,22 @@
 			left: 0;
 			width: 100%;
 			z-index: 998;
+			/* #ifndef APP-NVUE */
 			box-sizing: content-box;
+			/* #endif */
 
 			&__circle__border {
 				border-radius: 100%;
 				width: 110rpx;
 				height: 110rpx;
 				top: -48rpx;
-				left: 50%;
-				transform: translateX(-50%);
 				position: absolute;
 				z-index: 4;
 				background-color: #ffffff;
+				// 由于安卓的无能，导致只有3个tabbar item时，此css计算方式有误差
+				// 故使用js计算的形式来定位，此处不注释，是因为js计算有延后，避免出现位置闪动
+				left: 50%;
+				transform: translateX(-50%);
 
 				&:after {
 					border-radius: 100px;
@@ -197,14 +280,16 @@
 				justify-content: center;
 				height: 100%;
 				padding: 12rpx 0;
-				display: flex;
+				@include vue-flex;
 				flex-direction: column;
 				align-items: center;
 				position: relative;
 
 				&__button {
 					position: absolute;
-					top: 10rpx;
+					top: 14rpx;
+					left: 50%;
+					transform: translateX(-50%);
 				}
 
 				&__text {
@@ -212,25 +297,29 @@
 					font-size: 26rpx;
 					line-height: 28rpx;
 					position: absolute;
-					bottom: 12rpx;
+					bottom: 14rpx;
 					left: 50%;
 					transform: translateX(-50%);
+					width: 100%;
+					text-align: center;
 				}
 			}
 
 			&__circle {
 				position: relative;
-				display: flex;
+				@include vue-flex;
 				flex-direction: column;
 				justify-content: space-between;
 				z-index: 10;
+				/* #ifndef APP-NVUE */
 				height: calc(100% - 1px);
+				/* #endif */
 
 				&__button {
 					width: 90rpx;
 					height: 90rpx;
 					border-radius: 100%;
-					display: flex;
+					@include vue-flex;
 					justify-content: center;
 					align-items: center;
 					position: absolute;

uview-ui/libs/css/style.components.scss

@@ -1,3 +1,6 @@
-.demo {
-	
+@mixin vue-flex($direction: row) {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	flex-direction: $direction;
+	/* #endif */
 }