uni-app nvue 页面变形

uni-app nvue 页面变形

操作步骤：

  • 掉起原生微信登录，返回首页，切换底部tab栏（relunch）

预期结果：

  • 页面正常运行，页面不变形

实际结果：

  • 页面出现不同程度的变大和缩小，变化导致原本上下左右滑动的视频不能滑动，缩小则导致右侧会有白边，但不影响正常滑动

bug描述：

安卓设备，uni-app的nvue页面，唤醒安卓原生功能（例如：微信登录），返回后页面逻辑正常（未刷新过），执行redirectTo或reLaunch，页面重载后，渲染区域范围异常，有的设备上是右侧和下侧出现白边，有的设备是横向+纵向溢出（视觉效果是等比缩放）

  • 容器区宽度是用getSystemInfo取的windowWidth
  • 数值在正常和异常状态时都是同一数值
信息类别 信息内容
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.4.8
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 华为mate30 pro
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

image example.zip


更多关于uni-app nvue 页面变形的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue 页面变形的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 nvue 页面时，可能会遇到页面变形的问题。nvue 是 uni-app 提供的一种基于原生渲染的页面类型，它使用 weex 的原生渲染引擎，因此在布局和样式上与传统的 vue 页面有所不同。以下是一些可能导致页面变形的常见原因及解决方法：

1. 布局方式不同

  • 问题描述: nvue 页面的布局方式与 vue 页面不同，nvue 使用的是 flexbox 布局，而 vue 页面使用的是 CSS 布局。
  • 解决方法: 确保在 nvue 页面中使用 flexbox 布局。可以参考 weex 的 flexbox 布局文档来调整布局。

2. 样式不兼容

  • 问题描述: nvue 页面支持的 CSS 样式与 vue 页面不完全相同，某些 CSS 属性在 nvue 中可能不支持或表现不一致。
  • 解决方法: 检查并替换不支持的 CSS 属性。例如，nvue 不支持 float、position: fixed 等属性，可以使用 flexbox 布局来替代。

3. 单位问题

  • 问题描述: nvue 页面中使用的单位是 px，而 vue 页面中可以使用 rpx。如果混用单位，可能导致页面变形。
  • 解决方法: 在 nvue 页面中统一使用 px 作为单位，避免使用 rpx。

4. 图片尺寸问题

  • 问题描述: 在 nvue 页面中，图片的尺寸如果没有正确设置，可能会导致图片变形或页面布局错乱。
  • 解决方法: 确保为图片设置正确的宽高，或者使用 mode 属性来指定图片的缩放模式。

5. 组件兼容性问题

  • 问题描述: 某些 uni-app 组件在 nvue 页面中的表现可能与 vue 页面不同，导致页面变形。
  • 解决方法: 检查并替换不兼容的组件，或者使用 nvue 特有的组件。

6. 屏幕适配问题

  • 问题描述: nvue 页面的屏幕适配方式与 vue 页面不同，可能导致在不同设备上页面变形。
  • 解决方法: 使用 flexbox 布局和 px 单位来确保页面在不同设备上的适配性。

7. 调试工具

  • 问题描述: 在开发过程中，可能难以发现页面变形的具体原因。
  • 解决方法: 使用 uni-app 提供的调试工具，如 HBuilderX 的 nvue 调试功能，来检查页面的布局和样式。

示例代码

以下是一个简单的 nvue 页面布局示例，使用 flexbox 布局：

<template>
  <view class="container">
    <view class="header">
      <text>Header</text>
    </view>
    <view class="content">
      <text>Content</text>
    </view>
    <view class="footer">
      <text>Footer</text>
    </view>
  </view>
</template>

<style>
.container {
  flex: 1;
  flex-direction: column;
}
.header, .footer {
  height: 100px;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
}
.content {
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
}
</style>
回到顶部