uni-app nvue不支持uni-data-checkbox 显示异常

uni-app nvue不支持uni-data-checkbox 显示异常

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 11 家庭中文版
HBuilderX类型 正式
HBuilderX版本号 4.76
手机系统 Android
手机系统版本号 Android 10
手机厂商 小米
手机机型 Note7 Pro
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

官方的 hello - uniapp 模板

操作步骤：

/pages/extUI/space/space

预期结果：

/pages/extUI/space/space

实际结果：

/pages/extUI/space/space

bug描述：

安卓模拟器和手机， .nvue中显示 uni-data-checkbox 组件异常


更多关于uni-app nvue不支持uni-data-checkbox 显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app nvue不支持uni-data-checkbox 显示异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 nvue 页面中使用 uni-data-checkbox 组件确实存在兼容性问题。nvue 基于原生渲染，与 vue 页面的 WebView 渲染机制不同，部分组件在 nvue 中的支持度有限。

目前 uni-data-checkbox 在 nvue 中显示异常的主要原因是样式渲染不兼容。建议的解决方案：

  1. 使用原生 checkbox 替代 在 nvue 中可直接使用 <checkbox> 原生组件，性能更好且无兼容问题：
<checkbox-group @change="checkboxChange">
  <label>
    <checkbox value="option1"/>选项1
  </label>
</checkbox-group>
  1. 使用条件编译区分平台
<!-- #ifdef APP-NVUE -->
<checkbox-group>
  <!-- 原生实现 -->
</checkbox-group>
<!-- #endif -->

<!-- #ifndef APP-NVUE -->
<uni-data-checkbox>
  <!-- 原有实现 -->
</uni-data-checkbox>
<!-- #endif -->
回到顶部