布丁椰奶啵
布丁椰奶啵
  • 发布:2022-07-13 17:24
  • 更新:2023-04-04 22:46
  • 阅读:259

【报Bug】waterfall在安卓手机出现触发loadmore后,第一个数据上方会出现空白

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

手机系统: Android

手机系统版本号: Android 11

手机厂商: 华为

手机机型: 华为nova5i

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://vkceyugu.cdn.bspapp.com/VKCEYUGU-5b684a57-090c-4460-9bc4-34a9584edee3/85c6c71e-8832-42a4-abd5-904196b63c11.apk

示例代码:
<waterfall ref="waterfall" class="scroll" :column-count="2" column-width="auto" :column-gap="5" :left-gap="5" right-gap="5" :show-scrollbar="false" alwaysScrollableVertical :enableBackToTop="enableBackToTop" offsetAccuracy="offsetAccuracy" :loadmoreoffset="loadmoreoffset" @loadmore="getFriendsCircleList"> <refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"

display="refreshCircle ? 'show' : 'hide'"> <view class="refresh-view">
<text v-if="!refreshCircle" class="refresh-tip">{{ refreshText }}</text>
<loading-indicator class="loading-icon" animating="true" v-if="refreshCircle"></loading-indicator>
<text class="loading-text">{{refreshCircle ? '数据更新中':''}}</text>
</view>
</refresh>

    <header ref="head" style="">  
        <view class="bg-white px-30">  
            <g-banner :swiperItems="swiperItems" :height="360"></g-banner>  
        </view>  
        <view class="bg-white searchfriend_box">  
            <view style="width:320rpx;display: inline-block;">  
                <gui-segmented-control :items="cates" :current="currentOne" borderRadius="50rpx"  
                    @change="change">  
                </gui-segmented-control>  
            </view>  
        </view>  
    </header>  
    <header style="position: sticky;top: 0px;">  
        <view class="bg-white px-30 friend-type" v-if="friendStatus=='list' && currentOne==1">  
            <gui-switch-navigation :items="tabstype" textAlign="center" :size="150" width='660'  
currentIndex="currentIndex" @change="navchange" activeLineHeight="0" :margin='0' color="#666"> </gui-switch-navigation>
<view class="type-all" @click="friendtypePopup()">
<image src="/static/imgs/friend/friend_all.png" mode="" class="type-all-img"></image>
</view>
</view>
</header>
<header ref="head" v-if="friendStatus=='member' && currentOne==0" style="padding-bottom: 20px;">
<view>
<view class="" style="">
<view class="" style="width: 750rpx;border-bottom: 1px #dfdfdf solid;padding-top: 20rpx;">
<text class="text-black u-font-32 u-font-bold u-text-center">
还没有关注的人呢
</text>
<text class="u-text-center text-999 my-30">
关注后,可以在这里查看对方的最新朋友圈动态
</text>
</view>
<view v-if="friendsCircleList=='' && recommendedList=='' && friendStatus=='member'">
<data-none tip="暂无推荐关注"></data-none>
</view>
</view>
</view>
<view class="bb-1 border_none" v-for="item in recommendedList" :key="item.id">
<view class="floow_box px-30">
<view class="">
<view class="">
<image :src="formatSrc(item.avatar)" mode="" class="follow_head_img"></image>
</view>
<view class="follow_user">
<text class="u-font-bold fontsize"> {{item.name}} </text>
<text class="fontsize"> 粉丝:{{item.follows_count}} </text>
</view>
</view>
<view @click="followBtn(!item.is_follow,item)" class="button_flow">
<text class='button-text'>{{item.followContent}}</text>
</view>
</view>
</view>
</header>
<header>
<view v-if="friendsCircleList=='' && recommendedList=='' && friendStatus=='list'">
<data-none tip="暂无圈子内容"></data-none>
</view>
</header>
<cell v-for="item in friendsCircleList" :key="item.id">
<view class="wf-item-page">
<view class="img-box">
<image :src="item.images || '/static/imgs/icons/upload.png'" :mode="item.modeimg"
class="item-img" :id="item.id" @click="detail(item)" />
</view>
<image src="/static/imgs/friend/index_video.png" mode="" class="video_icon"
v-if="item.type=='video'" @click="detail(item)"></image>
<view class="item-info" @click="detail(item)">
<text class="info-nickname text-overflow text-line-2">{{ item.content }}</text>
</view>
<view class="item-infos">
<view class="" style="display: flex; flex-direction: row; align-items: center;">
<image :src="item.user_head" mode="aspectFill" class="info-avatar" @click="detail(item)" />
<text class="user_name text-line-1 text-overflow"
@click="detail(item)">{{ item.user_name }}</text>
</view>
<view class="" style="display: flex; flex-direction: row; align-items: center;">
<image @click="thumbs(item)" src="/static/imgs/friend/agree.png" mode="widthFix"
class="agree-avatar" v-if="item.is_thumbs==0" />
<image @click="thumbs(item)" src="/static/imgs/friend/agree2.png" mode="aspectFill"
class="agree-avatar" v-if="item.is_thumbs==1" />
<text class="agree-num" @click="thumbs(item)">{{ item.thumbs_num }}</text>
</view>
</view>
</view>
</cell>
</waterfall>

操作步骤:

进入圈子页面,进行下滑加载更多后返回页面顶部,就会出现空白

预期结果:

返回顶部后顶部不会出现空白区域

实际结果:

返回顶部之后出现了空白区域

bug描述:

在所有的安卓机型里,使用waterfall实现瀑布流,在触发loadmore时间后滑到顶部,会出现第一个左右列的第一个数据上方出现空白区域,

2022-07-13 17:24 负责人:无 分享
已邀请:
DYY

DYY - DYY

请问你解决了吗?我也遇到这种问题

要回复问题请先登录注册