vant框架Layout布局中col元素不够宽度变形的解决办法

用Layout的时候,我设置的是一行三个元素显示,但是有时候,遍历的对象可能无法满足一行三个显示,结果发现col元素会把拉伸一部分宽度。

这就很尴尬了,我在使用其他框架的这种布局的时候都没遇到这种情况,没办法,只能用死办法,我给你补上几个空col了

那么,如何计算需要补充几个呢?

假设我们要遍历的数组名为:oneArr

创建一个计算属性:

fillArr() {
      const remainder = Math.ceil(this.indusArr.length % 3);
      if (remainder !== 0) {
        return 3 - remainder;
      } else {
        return 0;
      }
    }

此时通过求余数我们判断是否有余数,有的话向上取整,然后用一行三个的3减去余数,就可以判断还需要补充几个了。

<!-- 数量不够,填充剩下的 -->
<van-col v-for="fill in fillIndus" :key="fill"></van-col>

这样就行了,虽然会多几个空元素,但是不影响整体,样式也都保持一致,方法是可以复用的。

0
  • 本文分类:vue 项目实战
  • 本文标签:vantlayoutcol求余向上取整
  • 流行热度:已超过 212 人围观了本文
  • 最后更新:2020年07月6日 - 11时39分39秒
  • 发布日期:2020年07月6日 - 11时27分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码