公告列表
公告列表
收藏
回答

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>

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

19 个回答

  • 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
    回复
  • 因为那树摄影工作室
    因为那树摄影工作室
    2021-03-15

    是顶部tab的问题，你拖动顶部tab上拉就可以加载下一页了，包括下拉刷新也要拖动顶部tab

    2021-03-15
    有用
    回复
  • 柒优邱
    柒优邱
    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
    有用
    回复

正在加载...

请 登录 后发表内容
相关问题
相关文档