- 当前 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 上方预留空白区域,不会太多,这样用户操作的时候会不习惯。
我们的解决方案是在 swiper 里面加了一个 scroll-view 然后来弄下拉刷新。
不算完美的做法,下拉体验不太好,scroll-view 触顶了就触发下拉刷新。
后来发现 swiper+scroll-view 很卡,然后就完全抛弃了这2个组件的搭配使用。
用其他变通方法来实现业务需求。