VUX grid组件显示图片留空

我用vux的grid组件来做宫格显示

<grid :cols="4">
    <grid-item v-for="(product,i) in hots" :key="i">
        <img width="100%" height="auto" :src="product.img">
        <div class="detail-wrapper">
            <span class="title">{{product.name}}</span>
        </div>
    </grid-item>
</grid>

使用测试数据显示也是正确的,但是在实际项目中的时候,显示了如下图片
图片描述

不管cols设置2还是设置4,都会有宫格留白的现象。

求助

阅读 4.2k
1 个回答

这不是cols的问题,是你没设置每个item的高度,文本有两行的时候高度多了,把底下的元素挤走了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进