收藏
回答

enablePullDownRefresh 和 swiper 兼容问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper 、enablePullDownRefresh 客户端 6.7.1 1.02.1808101

- 当前 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 上方预留空白区域,不会太多,这样用户操作的时候会不习惯。


最后一次编辑于  2018-08-21
回答关注问题邀请回答
收藏

1 个回答

  • 郑诚-手术后在家静养中
    郑诚-手术后在家静养中
    2019-01-11

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


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


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

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

    2019-01-11
    有用
    回复
登录 后发表内容