uni-app 原生子窗体高度问题

uni-app 原生子窗体高度问题

示例代码：

{
    "subNVues": [{  
        "id": "videoPlayApp", 
        "path": "pages/index/video/videoPlayAppWeb", 
        "style": {  
            "width": "100%",  
            "height": "700rpx"  
        }  
    }]
}

操作步骤：

  • 在视频页面采用margin-top

预期结果：

  • margin-top:700rpx

实际结果：

  • 560-580rpx不等，尤其是iPhone8和iPhone13表现完全不一样

bug描述：

原生子窗体高度问题。

背景：一个web连接的视频，固定到页面顶部，下面的其他内容可以滚动。要设置视频的高度。

故采用原生子窗体方案。在子窗体页面是一个webview

视频链接是一个阿里云点播的web播放器。

方法一：使用停靠的方式，在安卓上视频全屏播放后返回页面，原生子窗体没有高度。

方法二：采用默认的absolute方案，但是在各个平台高度表现均不一样。

两个方案都无法实现需求，都有bug。


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

1 回复

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


在 Uni-App 中，使用原生子窗体（如 subNVue）时，可能会遇到高度设置的问题。以下是一些常见的问题和解决方案：

1. 子窗体高度设置不正确

  • 问题描述：子窗体的高度没有按照预期显示，可能过高或过低。
  • 解决方案：
    • 确保在 subNVue 的样式或配置中正确设置了 height 属性。例如：
      {
  "subNVue": {
    "id": "mySubNVue",
    "path": "pages/subNVue",
    "style": {
      "height": "200px"
    }
  }
}
    • 如果需要动态设置高度，可以使用 uni.getSystemInfoSync() 获取屏幕高度，然后根据需求计算子窗体的高度。

2. 子窗体高度超出屏幕

  • 问题描述：子窗体的高度超出了屏幕范围，导致部分内容不可见。
  • 解决方案：
    • 使用 uni.getSystemInfoSync() 获取屏幕高度，并确保子窗体的高度不超过屏幕高度。
    • 如果需要自适应高度，可以使用 flex 布局或 calc 计算高度。

3. 子窗体高度与内容不匹配

  • 问题描述：子窗体的高度与内容高度不匹配，导致内容被截断或留白。
  • 解决方案：
    • 使用 uni.createSelectorQuery() 获取内容的高度，然后动态设置子窗体的高度。
    • 例如：
      uni.createSelectorQuery().select('.content').boundingClientRect(data => {
  uni.getSubNVueById('mySubNVue').setStyle({
    height: data.height + 'px'
  });
}).exec();

4. 子窗体高度在 iOS 和 Android 上表现不一致

  • 问题描述：在 iOS 和 Android 上，子窗体的高度表现不一致。
  • 解决方案：
    • 使用 uni.getSystemInfoSync() 获取设备信息，根据不同的平台（platform）设置不同的高度。
    • 例如：
      const systemInfo = uni.getSystemInfoSync();
const height = systemInfo.platform === 'ios' ? '200px' : '220px';
uni.getSubNVueById('mySubNVue').setStyle({
  height: height
});

5. 子窗体高度与键盘弹出冲突

  • 问题描述：当键盘弹出时，子窗体的高度没有自适应调整，导致内容被键盘遮挡。
  • 解决方案：
    • 监听键盘弹出事件，动态调整子窗体的高度。
    • 例如：
      uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  const screenHeight = uni.getSystemInfoSync().windowHeight;
  const newHeight = screenHeight - keyboardHeight;
  uni.getSubNVueById('mySubNVue').setStyle({
    height: newHeight + 'px'
  });
});

6. 子窗体高度与状态栏重叠

  • 问题描述：子窗体的高度与状态栏重叠，导致内容被状态栏遮挡。
  • 解决方案：
    • 使用 uni.getSystemInfoSync() 获取状态栏高度，并在设置子窗体高度时考虑状态栏高度。
    • 例如：
      const systemInfo = uni.getSystemInfoSync();
const statusBarHeight = systemInfo.statusBarHeight;
const newHeight = systemInfo.windowHeight - statusBarHeight;
uni.getSubNVueById('mySubNVue').setStyle({
  height: newHeight + 'px'
});

7. 子窗体高度与导航栏重叠

  • 问题描述：子窗体的高度与导航栏重叠，导致内容被导航栏遮挡。
  • 解决方案：
    • 使用 uni.getSystemInfoSync() 获取导航栏高度，并在设置子窗体高度时考虑导航栏高度。
    • 例如：
      const systemInfo = uni.getSystemInfoSync();
const navigationBarHeight = 44; // 假设导航栏高度为44px
const newHeight = systemInfo.windowHeight - navigationBarHeight;
uni.getSubNVueById('mySubNVue').setStyle({
  height: newHeight + 'px'
});
回到顶部