retrocode
retrocode
  • 发布:2023-09-25 09:45
  • 更新:2023-09-25 09:59
  • 阅读:160

【报Bug】vue3 nvue 设置 默认 flex-direction 在 H5端 失效,APP端正常

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 11

HBuilderX类型: 正式

HBuilderX版本号: 3.8.12

手机系统: Android

手机系统版本号: Android 14

手机厂商: 小米

手机机型: K40

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
{  
  "name": "test-uni-vue3-bug",  
  "appid": "__UNI__3FA1D05",  
  "description": "",  
  "versionName": "1.0.0",  
  "versionCode": "100",  
  "transformPx": false,  
  /* 5+App特有相关 */  
  "app-plus": {  
    "nvue": {  
      //可选,JSON对象,nvue页面相关配置  
      "flex-direction": "row" //可选,字符串类型,nvue页面的flex-direction默认值,可取值row、row-reverse、column、column-reverse  
    },  
    "usingComponents": true,  
    "nvueStyleCompiler": "uni-app",  
    "compilerVersion": 3,  
    "splashscreen": {  
      "alwaysShowBeforeRender": true,  
      "waiting": true,  
      "autoclose": true,  
      "delay": 0  
    },  
    /* 模块配置 */  
    "modules": {},  
    /* 应用发布信息 */  
    "distribute": {  
      /* android打包配置 */  
      "android": {  
        "permissions": [  
          "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",  
          "<uses-permission android:name=\"android.permission.VIBRATE\"/>",  
          "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",  
          "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",  
          "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",  
          "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.CAMERA\"/>",  
          "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",  
          "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",  
          "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",  
          "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",  
          "<uses-feature android:name=\"android.hardware.camera\"/>",  
          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"  
        ]  
      },  
      /* ios打包配置 */  
      "ios": {},  
      /* SDK配置 */  
      "sdkConfigs": {}  
    },  
    "renderer": "native",  
    "nvueLaunchMode": ""  
  },  
  /* 快应用特有相关 */  
  "quickapp": {},  
  /* 小程序特有相关 */  
  "mp-weixin": {  
    "appid": "",  
    "setting": {  
      "urlCheck": false  
    },  
    "usingComponents": true  
  },  
  "mp-alipay": {  
    "usingComponents": true  
  },  
  "mp-baidu": {  
    "usingComponents": true  
  },  
  "mp-toutiao": {  
    "usingComponents": true  
  },  
  "uniStatistics": {  
    "enable": false  
  },  
  "vueVersion": "3"  
}

操作步骤:

运行示例项目即可查看

预期结果:

设置默认"flex-direction": "row" 生效

实际结果:

设置默认"flex-direction": "row" 不生效

bug描述:

nvue页面配置默认flex方向在H5端失效

2023-09-25 09:45 负责人:无 分享
已邀请:
retrocode

retrocode (作者) - 现已加入旺旺大礼包全家桶

补充细节:
感觉是H5端的样式覆盖顺序有问题, 目前发现的是 全局预置的 scss类被 nvue默认的样式全部覆盖了, 在H5端无法生效

要回复问题请先登录注册