收藏
回答

swiper配合scroll-view下拉刷新和上拉加载不能共存问题

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 7.0.4 2.7.0

- 当前 Bug 的表现(可附上截图)


页面无法触发[onReachBottom()] 或者 scroll-view的[bindscrolltolower]


当前的页面结构使用了swiper和scroll-view组件,结构如下:

<topbar><topbar>


<swiper>

    <swiper-item>

        <scroll-view bindscrolltolower=尝试绑定触底监听>

            可下拉刷新,上拉加载的内容区域

        </scroll-view>

   </swiper-item>


    <swiper-item>

        <scroll-view>

            可下拉刷新,上拉加载的内容区域

        </scroll-view>

   </swiper-item>


    ...

</swiper>


<footernavbar><footernavbar>



- 预期表现


页面三段式布局,顶部、底部fixed固定;


中间填充满屏幕,内容区域swiper切换,且超过高度触发下拉刷新,上拉加载;


为了更好体验保留自带的下拉刷新,也能正常触发。



- 复现路径

默认状态:



下拉状态:(能够正常触发下拉刷新)



上拉加载状态:(无法触发默认的onReachBottom,也无法触发scroll-view的bindscrolltolower)




- 提供一个最简复现 Demo


提供了代码片段,可上拉复现




最后一次编辑于  2019-05-27
回答关注问题邀请回答
收藏

4 个回答

  • 十年雪落i
    十年雪落i
    2019-10-10

    那上拉加载呢 我这边 因为中间固定了100% 导致 onReachBottom不执行了,你这个可以执行吗


    2019-10-10
    有用
    回复
  • 大伟
    大伟
    2019-07-17

    解决办法:

    swipe中内容


    //wxml
    <view
        bind:touchmove="TTouchmove"
        class="jscroll-view-pull-component">

        列表内容区域


        <!--
        scroll[watcher]
        -->
        <view id="watcher-pullup"></view>

    </view>

    //js
    /**
     * ------------------------------------------------------------------
     * @monitor
     * TTouchmove
     *
     * 组件滑动监听
     * ------------------------------------------------------------------
     */
    TTouchmove: function(e) {
      let _this = this;
      let gap = _this.data.GAPBOTTOM;

      /**
       * ------------------------------------------------------------------
       * 监听loader
       * _ReachBottom
       * ------------------------------------------------------------------
       */
      // system infos
      let sys = _this.data.systemInfo;
      let windowHeight = sys.windowHeight;

      // query ob
      let query = wx.createSelectorQuery().in(_this);
      let nodeId = '#watcher-pullup';

      query.select(nodeId).boundingClientRect()
      query.exec(function(res){
        if (res[0].top <= windowHeight + gap) {

          // load data
          _this._loadData();
        }
      });

    },


    2019-07-17
    有用
    回复 3
    • 刘胖胖@
      刘胖胖@
      2020-04-07
      你好 我想问下这个代码片段中GAPBOTTOM是什么
      2020-04-07
      回复
    • xnng
      xnng
      2021-08-05回复刘胖胖@
      页面触底的判定距离
      2021-08-05
      回复
    • xnng
      xnng
      2021-08-05
      这里用 touchmove 没有做防抖处理,同时也没有处理惯性滑动的问题
      2021-08-05
      回复
  • Dearest
    Dearest
    2019-07-16

    你好请问怎解决的

    2019-07-16
    有用
    回复 3
    • 大伟
      大伟
      2019-07-17
      swiper里面不使用scroll-view,自己实现,使用view标签,绑定bind:touchmove="TTouchmove"
      2019-07-17
      回复
    • 大伟
      大伟
      2019-07-17
      绑定touchmove的view内部定义一个元素, touchmove滚动, 通过boundingClientRect监听次元素的位置, top到达指定高度是去触发自定义的上拉加载即可
      2019-07-17
      回复
    • 大伟
      大伟
      2019-07-17回复大伟
      //wxml 列表内容区域 //js /** * ------------------------------------------------------------------ * @monitor * TTouchmove * * 组件滑动监听 * ------------------------------------------------------------------ */ TTouchmove: function(e) { let _this = this; let gap = _this.data.GAPBOTTOM; /** * ------------------------------------------------------------------ * 监听loader * _ReachBottom * ------------------------------------------------------------------ */ // system infos let sys = _this.data.systemInfo; let windowHeight = sys.windowHeight; // query ob let query = wx.createSelectorQuery().in(_this); let nodeId = '#watcher-pullup'; query.select(nodeId).boundingClientRect() query.exec(function(res){ if (res[0].top <= windowHeight + gap) { // load data _this._loadData(); } }); },
      2019-07-17
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-05-27


    https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

    2019-05-27
    有用
    回复 2
    • 大伟
      大伟
      2019-05-27

      您好:


      去掉scroll-view使用自带下拉上拉


      页面头尾固定,中间内容是swiper,且可y方向上滚动,


      去掉scroll-view组件,后再实现:


      这种情况下要实现下拉,可以直接调用到onPullDownRefresh,


      在实现上拉加载时,调用onReachBottom也调用不到。


      这种情况下如何处理呢?






      2019-05-27
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2019-05-27回复大伟


      2019-05-27
      回复
登录 后发表内容