<waterfall class="listview" column-count="2" column-width="auto" left-gap="15" right-gap="15" column-gap="16"
:scroll-y="true">
<uni-refresh class="refresh" @refresh="onRefresh" @pullingdown="onPullingdown" :display="refreshing ? 'show' : 'hide'">
<div class="refresh-view">
<image class="refresh-icon" :src="refreshIcon" :style="{width: (refreshing || pulling) ? 0: '32px'}" :class="{'refresh-icon-active': refreshFlag}"></image>
<uni-load-more v-if="refreshing" class="loading-icon" status="loading" :contentText="loadingMoreText"></uni-load-more>
<text class="loading-text">{{refreshText}}</text>
</div>
</uni-refresh>
<uni-cell v-for="(item,index) of dataList" :key="item.id">
<caligraphyItem :mountItem="item" @click="goDetail(item)"></caligraphyItem>
</uni-cell>
<loading class="loading-more" :display="isLoading ? 'show' : 'hide'" @loading="loadMore">
<loading-indicator animating="true"></loading-indicator>
<text class="loading-more-text">{{loadingText}}</text>
</loading>
</waterfall>
- 发布:2020-10-21 14:56
- 更新:2021-09-24 00:06
- 阅读:2243
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: Windows 10 专业版,版本号1809,操作系统版本:17763.1282
HBuilderX类型: 正式
HBuilderX版本号: 2.9.3
手机系统: iOS
手机系统版本号: iOS 13.4
手机厂商: 苹果
手机机型: iphone SE
页面类型: nvue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
1.nuve页面中waterfall组件中引入refresh组件和loadmore组件
2.编写对应的事件回调函数
3.下拉刷新或上拉加载更多没有效果
1.nuve页面中waterfall组件中引入refresh组件和loadmore组件
2.编写对应的事件回调函数
3.下拉刷新或上拉加载更多没有效果
预期结果:
正常触发下拉刷新或上拉加载更多
正常触发下拉刷新或上拉加载更多
实际结果:
waterfall组件无法上下滑动,无法触发下拉刷新或上拉加载更多
waterfall组件无法上下滑动,无法触发下拉刷新或上拉加载更多
bug描述:
1.iOS端在nvue页面waterfall中refresh和loadmore组件失效不触发下拉刷新和上拉加载更多(没有数据时或者数据较少一页能显示完全时)
2.当数据较多(一页显示不全时)可以正常滑动waterfall组件同时也可以正常触发下拉刷新和上拉加载更多
- list组件中refresh和loadmore组件正常
waterfall 组件的用法不对,不要照搬 list 的逻辑,附件是个示例你可以参考一下,具体请查阅uni官方文档
-
shmily138 (作者)
刚使用你提供的示例代码,发现数据少没有填满时,同样有不能刷新和下拉的问题,整个waterfall组件都不能滑动,我和提供的示例工程有相同的问题
2020-10-28 17:23
-
shmily138 (作者)
回复 DCloud_iOS_XHY: 感谢回复,亲测有效,可以滑动刷新和上拉了。但是有个问题是:在数据已经填满一页时下拉刷新,触发刷新后滚动条会触底导致看不到refresh组件(弹到底部,数据刷新完成后又很快弹到顶部,尝试设置bounce=false会导致不能滑动页面)是什么原因呢?
2020-10-29 10:13
特购 - 特购
作者怎么解决上拉加载的? 我这边使用loading 标签 不触发@loading事件 我的nvue页面格式是 list-swiper-waterfall 这种格式
loading 写在list里面和waterfall里面都不会触发@loading