swiper-item，如何解决onReachBottom只会触发一次的问题
发布于 6 年前 作者 yaoming 11922 次浏览 来自 问答

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>

10 回复

请问解决了吗

onReachBottom 和 swiper没关系啊~

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

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

<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 的高度赋值！

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

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

应该是这样的结构

<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 以外的区域是可以执行下拉刷新的，我是这么干的

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

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

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

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

    <view class="a-scroll">
        <view class="a-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">所有</view>
        <view class="a-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">进行中</view>
        <view class="a-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">未进行</view>
        <view class="a-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">已结束</view>
    </view>
    <view>
        <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.bcount}} 条</view>
                                <view class='info'>发布单位：{{item.pname}} </view>
                                <view class='info'>发布时间：{{item.publishtime}} </view>
                            </view>
                            <view wx:else 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>
    </view>

上面是wxml的代码，想要实现的功能就是左右滑动实现tab的切换，每个tab下面的数据很多，

我想通过onReachBottom来实现分页加载，但是onReachBottom这个方法只触发一次，第一次触发后加载了数据后再次滑动想继续加载就不触发了。所以我也不知道是为什么，查找了百度和社区有些人是和我同样的问题，但是好像最终都没有解决掉。

有人说是swiper高度的问题，有人说调试基础库的问题。唉。。。。。

回到顶部