uniapp nvue下waterfall组件图片高度不自适应

分类：uni-app

uniapp

uniapp nvue下waterfall组件图片高度貌似固定了的，不会跟随图片大小自动调整高度

2023-10-19 16:59 负责人:无分享

3 个回复

c***@e-buy.com

找到方法了，将waterfall放到父容器下边，给父容器高度设置为窗口高度，除瀑布流展示的列表外，其他的组件都放在<header>中即可。

示例代码如下：

<template>  
  <waterfall column-count="2" column-width="auto" :style="{ height: windowHeight + 'px' }">  
    <header>  
      <!--轮播-->  
      <swiper class="swiper_banner">  
        ......  
      </swiper>  
      <!--广告位-->  
      <view class="ads_List_box">  
        ......  
      </view>  
    </header>  
    <!--瀑布流展示的商品列表-->  
    <cell v-for="num in lists" >  
      <text>{{num}}</text>  
    </cell>  
  </waterfall>  
</template>  
<script>  
  export default {  
    data () {  
      return {  
        lists: ['A', 'B', 'C', 'D', 'E']  
      }  
    }  
  }  
</script>  

<style></style>