uni-app waterfall出现空白bug

uni-app waterfall出现空白bug

开发环境信息

项目 信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 2.8.3.20200728
HBuilderX类型 正式
HBuilderX版本 2.8.3
手机系统 Android
手机系统版本 Android 8.0
手机厂商 华为
手机机型 华为M8
页面类型 nvue
打包方式 云端
项目创建方式 HBuilderX

示例代码

<template>
<view class="body">
<waterfall column-count="2" column-width="auto" column-gap="0dp">
<cell v-for="(item,index) in datalist" >
<text>{{item.title}}</text>
</cell>
</waterfall>
</view>
</template>  
<script>
export default {
data() {
return {
datalist: [{
title:1
},{
title:2
},{
title:3
},{
title:4
},{
title:5
},{
title:6
},{
title:7
},{
title:8
},{
title:9
}]
}
}
}
</script>  
<style>
.body{
background-color: #007AFF;
}
</style>

操作步骤

  • 运行就出现多余的空白

预期结果

  • 内容多少高度，这个蓝色的就多少高度

实际结果

  • 实际蓝色的多了和内容一样的高度，可以看我上传的附件图片，附件图片蓝色画红框的部分高度是多出来的

bug描述

  • waterfall使用这个内置瀑布流组件，会多出现和内容一样高度的空白
  • 实际蓝色的多了和内容一样的高度，可以看我上传的附件图片，附件图片蓝色画红框的部分高度是多出来的

附件图片

附件图片


更多关于uni-app waterfall出现空白bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

waterfall 需要指定高度

更多关于uni-app waterfall出现空白bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，解决这个问题，贴出部分代码，方便其他人参考 this.windowHeight = uni.getSystemInfoSync().windowHeight; <view class="body" v-bind:style="{ height: windowHeight + 'px' }"> <waterfall column-count=“2” column-width=“auto” column-gap=“0dp” @loadmore=“loadMore()”> <cell v-for="(item,index) in datalist">

回复 2***@qq.com: 你好，我也遇到了，加了高度还是没解决,可以帮忙看看吗

<view v-bind:style="{ height: '500px' }"> <list class="myp-bg-page" ref="myp-list" :bounce="true" isSwiperList="true" style="width:750rpx;flex:1;height: 500px;" :loadmoreoffset="60" [@loadmore](/user/loadmore)="toGetAlbums">

根据您描述的问题和提供的代码，waterfall组件在nvue页面确实存在高度计算异常的问题。这是已知的waterfall组件在Android平台上的一个常见问题。

解决方案如下：

  1. 给waterfall组件添加固定高度：
<waterfall style="height:1000px">
  1. 或者使用动态计算高度：
<waterfall :style="{height: datalist.length * 100 + 'px'}">
  1. 也可以尝试使用flex布局：
.body{
  flex:1;
  background-color: #007AFF;
}
回到顶部