收藏
回答

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

框架类型 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>

回答关注问题邀请回答
收藏

18 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-03-14

    你的意思是滚动区域是在swiper里面?


    这时候并不是页面本身在滚动。你需要用scroll-view和它的bindscrolltolower。

    2018-03-14
    有用
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-03-14

    横向的swiper不会带来上下滑动的。但是 onReachBottom 需要在页面本身能够上下滑动时才有意义。所以想知道你页面的上下滑动是怎么做的。

    2018-03-14
    有用
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-03-14

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


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

    2018-03-14
    有用
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-03-13

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

    2018-03-13
    有用
    回复
  • 小程序技术专员-拉风
    小程序技术专员-拉风
    2018-03-12

    onReachBottom 和 swiper没关系啊~

    2018-03-12
    有用
    回复
  • 张凯
    张凯
    2019-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 的高度赋值!



    2019-01-21
    有用 2
    回复
  • 智慧可贵了
    智慧可贵了
    2018-03-13

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

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

    没有人碰到过吗?

    2018-03-13
    有用 1
    回复
  • 🌵
    🌵
    2018-04-10

    请问解决了吗

    2018-04-10
    有用
    回复
  • POPO
    POPO
    2018-03-14

    应该是这样的结构

    <swiper>
      <swiper-item>
        <scroll-view>
        </scroll-view>
      </swiper-item>
    </swiper>

    无限加载写在 scroll-view 的 bindscrolltolower 上,页面的下拉刷新可以通过 scroll-view 的 bindscrolltoupper 事件来触发 wx.startPullDownRefresh(),或者监听 scroll-view 的滚动事件 bindscroll,又或者你的 scroll-view 并没有占据页面全高,比如说设计上有顶部信息区域,这些 scroll-view 以外的区域是可以执行下拉刷新的,我是这么干的

    2018-03-14
    有用
    回复
  • 智慧可贵了
    智慧可贵了
    2018-03-14

    scroll-view又没有下拉刷新,只有滑动到顶部刷新bindscrolltoupper。

    我现在已经在改用scroll-view这个了,只有不要下拉刷新这个功能了。谢谢您的解惑,知道是为什么了。

    2018-03-14
    有用
    回复

正在加载...

登录 后发表内容