uni-app button按钮在nvue上设置为mini时与其他平台表现不一致

uni-app button按钮在nvue上设置为mini时与其他平台表现不一致

操作步骤：

  • 代码见附件，创建uniui模板，创建index.nvue，写一个button按钮，运行到真机

预期结果：

  • 显示为一个小的块级元素

实际结果：

  • 只是高度变小了，宽度没有变化

bug描述：

  • nvue设置为size=mini时，非块级元素

| 信息类别     | 详细信息       |
|--------------|----------------|
| 产品分类     | uniapp/App     |
| PC开发环境   | Windows        |
| PC版本号     | 10             |
| HBuilderX    | 正式           |
| HBuilderX版本 | 3.3.12         |
| 手机系统      | Android        |
| 手机版本号    | Android 12     |
| 手机厂商      | 小米           |
| 手机机型      | miui13         |
| 页面类型     | nvue           |
| vue版本      | vue2           |
| 打包方式     | 云端           |
| 项目创建方式 | HBuilderX      |

更多关于uni-app button按钮在nvue上设置为mini时与其他平台表现不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

已验证

更多关于uni-app button按钮在nvue上设置为mini时与其他平台表现不一致的实战教程也可以访问 https://www.itying.com/category-93-b0.html


nvue 都是 flex 布局，没有块概念，效果是对的，从上到下 你没有指定对齐方式或宽高，默认就是父容器宽度

回复 FullStack: 有道理，已解决

这是一个已知的nvue平台样式差异问题。在nvue中，button组件的mini样式确实与其他平台表现不一致，主要差异在于：

  1. nvue平台的mini按钮只调整了高度，宽度仍保持默认值
  2. 其他平台(mini)会同时调整高度和宽度，呈现更紧凑的样式

解决方案有两种：

  1. 手动设置宽度样式：
<button size="mini" style="width:100rpx"></button>
  1. 使用条件编译处理平台差异：
<!-- #ifdef APP-NVUE -->
<button size="mini" style="width:100rpx"></button>
<!-- #else -->
<button size="mini"></button>
<!-- #endif -->
回到顶部