收藏
回答

swiper-item,如何解决onReachBottom只会触发一次的问题

问题模块 框架类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 swiper-item 工具 2.6.2.27 1.9.1

swiper,swiper-item开发tab滑动效果。为什么onReachBottom只能执行一次,再往下滑动就执行不了。

贴代码:

<swiper class="swiper-box" current="{{currentTab}}" duration="300" bindchange="swichTab" style="height:{{clientHeight?clientHeight+'px':'auto'}}">
        <swiper-item class="swiper-item">
     
                <block wx:for="{{projectList}}" wx:key="*this">
                    <view data-pid="{{item.id}}" class="project-list" bindtap='newsClick'>
                        <view class='project-info'>
                            <view class='name'>{{item.name}}</view>

                            <view class='info'>发布单位:{{item.pname}} </view>
                            <view class='info'>发布时间:{{item.publishtime}} </view>
                        </view>
                        <view class='project-img'>
                            <image class='img' src='{{item.url}}' mode="scaleToFill" lazy-load="true"></image>
                        </view>
                    </view>
                </block>
                <view class="weui-loadmore" hidden="{{isHideLoadMore}}">
                    <view class="weui-loading"></view>
                    <view class="weui-loadmore__tips">正在加载</view>
                </view>
       
        </swiper-item>
</swiper>

最后一次编辑于  2018-03-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

18 个回答

  • 张凯
    张凯
    01-21
    <view class="record-data">
        <swiper current="{{swiperIndex}}" bindchange="swiperChange" style="height:{{swiperHeight}}">
            <swiper-item>
                <scroll-view style="height: {{swiperHeight}}" scroll-y bindscrolltolower="loadMoreData">
                    <view class="record-list">
                        <view class="record-item" wx:for="{{orders}}" wx:key="{{index}}">
                              这是循环的内容
                        </view>
                    </view>
                </scroll-view>
            </swiper-item>
        </swiper>

    </view>


    loadMoreData: function() {
        let pageNo = this.data.curPage;
        let pullDownRefreshState = this.data.pullDownRefreshState;
        if (pullDownRefreshState) {
            if (pageNo < this.data.totalPage) {
                pageNo++;
                this.setData({
                    curPage: pageNo
                })
                this.getOrderList(pageNo);
            } else {
                wx.showToast({
                    title: '全部数据已加载完毕',
                    icon: 'none',
                    duration: 1500,
                    mask: true
                })
            }
        }
    }



    这是我的解决方案,这里的关键是:利用scroll-view 的bindscrolltolower方法,注意:一定要给scroll-view 的高度赋值!



    01-21
    赞同 11
    回复
  • raphealguo
    raphealguo
    2018-03-12

    onReachBottom 和 swiper没关系啊~

    2018-03-12
    赞同
    回复
  • 智慧可贵了
    智慧可贵了
    2018-03-12

    不知道为什么啊?第一次onReachBottom可以执行的。然后继续向上滑动,第二次加载的时候就不执行了。

    然后把页面滑倒顶部,再次往下滑动就可以继续加载,然后第三次加载又不可以了,还要重复之前的动作才可以。要看JS代码吗?实在查不到是什么原因。

    2018-03-12
    赞同
    回复
  • 智慧可贵了
    智慧可贵了
    2018-03-12

    onReachBottom 是页面的触底事件,即页面滚动条拉到底部时触发,swiper没这个事件。

    因为你把swiper的高度定死,所以页面的滚动条仅触底一次,当然只触发一次。

    你把高度去掉试试看


    是因为这个问题吗????


    2018-03-12
    赞同
    回复
  • drcus
    drcus
    2018-03-13

    page的  onPullDownRefresh onReachBottom  函数无法触发(一次也没有)

    wxml结构:(内容有很多  编辑器中有滚动条)

    <view>
       <swiper>
      </swiper>
       ...
    </view>

    js :


    page({
    ...
      onPullDownRefresh: function() {
        console.log('上拉刷新了')
        wx.stopPullDownRefresh()
      },
      onReachBottom: function() {
        console.log('下拉加载了')
    }
    }


    log 日志并没有执行

    请问是怎么回事 ,如何解决。

    2018-03-13
    赞同
    回复
  • LastLeaf
    LastLeaf
    2018-03-13

    你好,onReachBottom onPullDownRefresh 针对的是页面本身的滚动,不能用于有scroll-view滚动时的情况。

    2018-03-13
    赞同
    回复
  • 智慧可贵了
    智慧可贵了
    2018-03-13

    您好,您看我上面贴出来的代码,没有scroll-view,就是用swiper,swiper-item做下拉刷新和上拉加载的。

    但是不知道为什么,onReachBottom就是只触发一次,然后就不触发了,也不报错。

    没有人碰到过吗?

    2018-03-13
    赞同
    回复
  • 智慧可贵了
    智慧可贵了
    2018-03-14

    Drcus ,是不是要在

    <swiper>

    </swiper>

    里面加上<swiper-item></swiper-item>


    2018-03-14
    赞同
    回复
  • LastLeaf
    LastLeaf
    2018-03-14

    抱歉,我还不是很理解你的问题。


    swiper本身只有左右滑动的机制,为什么会有上下滑动才会有的触底刷新呢?

    2018-03-14
    赞同
    回复
  • drcus
    drcus
    2018-03-14

    你好:

    1.  LastLeaf  “onReachBottom onPullDownRefresh 针对的是页面本身的滚动”对的                                                               wxml 中  最顶级的标签就是view标签 整个页面中没有scroll-view

    2. 我的是tabs 底部四个页面  第一个tab这两个方法都可以执行  第二个tab页面这两个函数就完全没任何反应了 onload函数是正常的   每个tab中都没有用到scroll-view   是否还需要更多信息 ? 我可以提供

    3. 我个人觉得和swiper 组件可能有点关系  因为第一个tab中没有swiper



     2. 智慧可贵了   里面加上<swiper-item></swiper-item>  是的里面结构都是完整的  我只是省略了


    2018-03-14
    赞同
    回复