uniapp开发nuve原生瀑布流组件waterfall列表后边出现空白的处理方法

发布时间 2023-11-03 19:08:10作者: 逍遥云天

异常描述:

首页有轮播、广告位、瀑布流商品列表,但是使用了原生组件waterfall的商品列表后边出现了大面积空白。

解决方法:

将waterfall放到父容器下边或者直接放到template下边作为父容器,给父容器设置高度设置为窗口高度,除瀑布流展示的列表外,其他的组件都放在中即可。

<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>

按这个方法改造即可,效果如下:

后记:

至于waterfall是直接作为父容器,还是放到父容器里边,亦或是外边再加swiper、list等组件都可以,前提是界面要展示的所有内容都要放在waterfall里边,才能做到高度自适应(目前我是这样理解的,没太多时间过多研究了,有兴趣的小伙伴可以深入研究)。