nvue样式调整

components/page-nav/page-nav.vue

@@ -46,6 +46,7 @@
 </script>
 
 <style lang="scss" scoped>
+	@import "@/uview-ui/libs/css/style.components.scss";
 	.nav-wrap {
 		padding: 30rpx;
 		position: relative;
@@ -58,7 +59,8 @@
 	}
 	
 	.nav-title {
-		display: flex;
+		@include vue-flex;
+		flex-direction: row;
 		align-items: center;
 	}
 	
@@ -67,7 +69,7 @@
 	}
 	
 	.nav-title__text {
-		display: flex;
+		@include vue-flex;
 		color: $u-main-color;
 		font-size: 50rpx;
 		font-weight: bold;

manifest.json

@@ -6,6 +6,10 @@
     "versionCode" : "100",
     "transformPx" : false,
     "app-plus" : {
+		// 定义nvue页面的flex布局默认为row排列
+		"nvue ": {
+			"flex-direction": "row"
+		},
         // APP-VUE分包，可提APP升启动速度，2.7.12开始支持，兼容微信小程序分包方案，默认关闭
         "optimization" : {
             "subPackages" : true

uview-ui/components/u-cell-group/u-cell-group.vue

@@ -65,5 +65,6 @@
 
 	.u-cell-item-box {
 		background-color: #FFFFFF;
+		flex-direction: center;
 	}
 </style>

uview-ui/components/u-cell-item/u-cell-item.vue

@@ -211,8 +211,9 @@ export default {
 <style lang="scss" scoped>
 @import "../../libs/css/style.components.scss";
 .u-cell {
+	@include vue-flex;
+	align-items: center;
 	position: relative;
-	display: flex;
 	box-sizing: border-box;
 	width: 100%;
 	padding: 26rpx 32rpx;

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

@@ -181,14 +181,14 @@
 		width: 100%;
 
 		&__menu {
-			display: flex;
+			@include vue-flex;
 			position: relative;
 			z-index: 11;
 			height: 80rpx;
 
 			&__item {
 				flex: 1;
-				display: flex;
+				@include vue-flex;
 				justify-content: center;
 				align-items: center;
 
@@ -201,7 +201,7 @@
 					margin-left: 6rpx;
 					transition: transform .3s;
 					align-items: center;
-					display: flex;
+					@include vue-flex;
 					
 					&--rotate {
 						transform: rotate(180deg);

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

@@ -203,7 +203,10 @@ export default {
 @import '../../iconfont.css';
 
 .u-icon {
+	/* #ifndef APP-NVUE */
 	display: inline-flex;
+	/* #endif */
+	flex-direction: row;
 	align-items: center;
 
 	&--left {
@@ -251,8 +254,10 @@ export default {
 	}
 
 	&__img {
+		/* #ifndef APP-PLUS */
 		height: auto;
 		will-change: transform;
+		/* #endif */
 	}
 
 	&__label {

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

@@ -230,6 +230,7 @@
 </script>
 
 <style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
 	.u-fixed-placeholder {
 		box-sizing: content-box;
 	}
@@ -237,7 +238,7 @@
 	.u-tabbar {
 
 		&__content {
-			display: flex;
+			@include vue-flex;
 			align-items: center;
 			position: relative;
 			position: fixed;
@@ -277,7 +278,7 @@
 
 				&__button {
 					position: absolute;
-					top: 10rpx;
+					top: 14rpx;
 					left: 50%;
 					transform: translateX(-50%);
 				}
@@ -287,7 +288,7 @@
 					font-size: 26rpx;
 					line-height: 28rpx;
 					position: absolute;
-					bottom: 12rpx;
+					bottom: 14rpx;
 					left: 50%;
 					transform: translateX(-50%);
 				}

uview-ui/libs/css/common.scss

@@ -45,7 +45,7 @@ text {
 	/* #ifndef APP-NVUE */
 	display: flex;
 	/* #endif */
-	flex-direction: row;
+	flex-direction: row!important;
 	align-items: center;
 }
 
@@ -169,4 +169,8 @@ text {
 	}
 }
 
-
+// 重置nvue的默认关于flex的样式
+.u-reset-nvue {
+	flex-direction: row;
+	align-items: center;
+}
\ No newline at end of file

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

-.demo {
-	
+// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
+@mixin vue-flex($direction: row) {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	flex-direction: $direction;
+	/* #endif */
 }
\ No newline at end of file

vue.config.js

@@ -6,5 +6,5 @@ module.exports = {
 			disableHostCheck: true
 		}
 	},
-	//productionSourceMap: false
+	//productionSourceMap: false,
 }