nvue u-grid 组件 iphone 11 col =5 会 换行

[chengpeng1995]

版本

2.0.20

转载链接

image.hzmodi.cn

重现步骤

nvue app

u-grid-item.vue

u-grid col 设置为5，在iphone 11 中最后一个会到下面一行，iphone13 和安卓大屏手机没有发现这个问题

期望的结果是什么？

不会自动换行

实际的结果是什么？

col是5 在iphone11 上面换行了

---

定位原因 可能是，计算item宽度，多出来像素了，导致换行 getItemWidth

[yatoku]

可以提供一下可复现的例子或者代码片段吗？

[SnailChen2020]

uview-ui/components/u-grid-item.vue在获取子项的宽度时，如果不能整除，实际会被向上取整。导致子项加起来的宽度大于父宽度，所以最后一项换行了。

async getItemWidth() {
      // 如果是nvue，不能使用百分比，只能使用固定宽度
      let width = 0
      if(this.parent) {
          // 获取父组件宽度后，除以栅格数，得出每个item的宽度
          const parentWidth = await this.getParentWidth()
          width = parentWidth / Number(this.parentData.col) + 'px'
      }
      this.width = width
},

只需要对宽度进行向下取整即可解决此问题

width = Math.floor(parentWidth / Number(this.parentData.col)) + 'px'