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>

最后一次编辑于  03-12  (未经腾讯允许,不得转载)
收藏 0评论 0
关注问题写回答

17 个回答

  • 

    请问解决了吗

    赞同 0没有帮助
    0评论
    复制
    04-10
  • POPOPOPO

    应该是这样的结构

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

    赞同 0没有帮助
    0评论
    复制
    03-14
  • 智慧可贵了智慧可贵了

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

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

    赞同 0没有帮助
    0评论
    复制
    03-14
  • LastLeafLastLeaf

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


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

    赞同 0没有帮助
    0评论
    复制
    03-14
  • 智慧可贵了智慧可贵了
        <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高度的问题,有人说调试基础库的问题。唉。。。。。

    赞同 0没有帮助
    0评论
    复制
    03-14
  • LastLeafLastLeaf

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

    赞同 0没有帮助
    0评论
    复制
    03-14
  • 智慧可贵了智慧可贵了

    Drcus ,你这个问题还没碰到过啊,我现在的问题和你的不一样的。我也头疼。

    赞同 0没有帮助
    0评论
    复制
    03-14
  • 智慧可贵了智慧可贵了

    LastLeaf,您好。您的意思swiper和自带的API "onReachBottom"是没有冲突的是吗?


    赞同 0没有帮助
    0评论
    复制
    03-14
  • drcusdrcus

    你好:

    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>  是的里面结构都是完整的  我只是省略了


    赞同 0没有帮助
    0评论
    复制
    03-14
  • LastLeafLastLeaf

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


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

    赞同 0没有帮助
    0评论
    复制
    03-14