uni-app subnvue原生子窗体显示空白

uni-app subnvue原生子窗体显示空白

操作步骤：

  • 在页面中使用subvnue

预期结果：

  • 窗体中正确显示内容

实际结果：

  • 窗体显示空白

bug描述：

  • 在页面中使用subnvue原生子窗体，窗体打开空白，控制体报[plugin:vite:nvue-css] WARNING: content is not a standard property name (may not be supported)，nvue页面中没有使用不支持的css，这些都是项目的全局样式

图片

Image 1 Image 2

项目信息

信息 值
产品分类 uniapp/App
PC开发环境 Mac
PC开发环境版本 14.0
HBuilderX类型 正式
HBuilderX版本 3.99
手机系统 iOS
手机系统版本 iOS 17
手机厂商 模拟器
手机机型 iPhone15
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app subnvue原生子窗体显示空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

我遇到一样的场景，然后我的问题是因为我的popup.nvue的路径没有引入正确。 我的pages还有个父目录src. 我popup.vue 的引入 path: ‘‘src/pages/subNVues/popup’’ 我开始时候少了 src。

更多关于uni-app subnvue原生子窗体显示空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 开发时，如果你遇到 subNVue 原生子窗体显示空白的问题，可能是由于以下几个原因导致的。以下是一些常见的排查步骤和解决方案：

1. 检查 subNVue 的配置

确保你在 pages.json 中正确配置了 subNVue。例如：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "subNVue": [
          {
            "id": "mySubNVue",
            "path": "pages/subNVue/subNVue",
            "style": {
              "position": "absolute",
              "width": "100%",
              "height": "100%",
              "background": "transparent"
            }
          }
        ]
      }
    }
  ]
}

2. 检查 subNVue 页面的内容

确保 subNVue 页面的内容是正确的，并且有足够的样式来显示内容。例如：

<template>
  <view class="container">
    <text>This is a subNVue page</text>
  </view>
</template>

<style>
.container {
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

3. 检查 subNVue 的显示和隐藏

确保你正确地调用了 subNVue 的显示和隐藏方法。例如：

// 显示 subNVue
const subNVue = uni.getSubNVueById('mySubNVue');
subNVue.show();

// 隐藏 subNVue
subNVue.hide();

4. 检查 subNVue 的层级

subNVue 的层级可能会影响其显示。你可以通过设置 zIndex 来调整 subNVue 的层级。例如：

{
  "style": {
    "position": "absolute",
    "width": "100%",
    "height": "100%",
    "background": "transparent",
    "zIndex": 999
  }
}
回到顶部