enablePullDownRefresh 和 swiper 兼容问题
发布于 6 年前 作者 xia18 12873 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

swiper 和 enablePullDownRefresh 配合使用时,模拟器没有问题,

但是到真机,只会偶尔出现下拉操作。

几经测试,发现是在swiper以外的头部区域,下拉才会触发enablePullDownRefresh 。。

  • 预期表现

1: 和模拟器一样

  • 复现路径
  • 提供一个最简复现 Demo

index,wxml

<swiper  duration=“500” vertical=“true” style=“height:900px;”  wx:if="{{list}}" current="{{current}}" catchchange=“eventChangeMagicContent”>

<swiper-item>

<view style=“background-color:red;height:500px”>11</view>

</swiper-item>

<swiper-item>

<view style=“background-color:red;height:500px”>22</view>

</swiper-item>

</swiper>

index.js

onPullDownRefresh: function (event) {

        console.log(‘onPullDownRefresh’);

}

  • 解决路程:

1: 在swiper前面,预留占位空间, <view style=“height:50px”></view>

这样,在空白处下拉是可以的,但是在 swiper-item 内容区域下拉不会触发 enablePullDownRefresh的

2: 不知道有没有更好的办法,因为如果在 swiper 上方预留空白区域,不会太多,这样用户操作的时候会不习惯。

1 回复

我们的解决方案是在 swiper 里面加了一个 scroll-view 然后来弄下拉刷新。

不算完美的做法,下拉体验不太好,scroll-view 触顶了就触发下拉刷新。

后来发现 swiper+scroll-view 很卡,然后就完全抛弃了这2个组件的搭配使用。

用其他变通方法来实现业务需求。

回到顶部