收藏
回答

swiper和onReachBottom

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
API和组件 小程序 Bug onReachBottom/swiper 微信iOS客户端 Android 6.6.6 2.01

在swiper中只触发一次onReachBottom,必须回到顶部再滑到底部才能再一次触发onReachBottom,这问题什么时候解决????

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

4 个回答

  • 韩旭
    韩旭
    2018-07-10
    1. 这个问题是swiper跟onreachBottom同时出现产生的

    2. 只触发一次是因为你的高度是设定死的,并不是必须回到顶部才触发第二次,而是回到第一次触发的高度,你可能用了wx.getSystemInfo里的windowheight来赋值高度,但第一次触发的时候并没有再次设置,所以需要上滑到顶部。举个例子:就是第一次设置400,到达400触发了你在滑到底部,其实你已经到达800了,但是onreachBottom还是认为400是底,所以到400才触发,解决问题的关键就是要在触发的时候在设定高度。

    3. 可能你设定完成后底部可以加载了,但是页面乱了,加载完需要上啦,然后才能看到滑动条,如图,其实这页有两个高度swiper和scroll-view,出现这个问题的原因是两个页面高度不统一,解决办法,设置成联动的,算好swiper的高度。如:

      <swiper class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">  

      <swiper-item>  

      <scroll-view scroll-y="true" style="height: {{winHeight-15}}px">

    style样式,这样就可以解决问题了

    2018-07-10
    赞同 1
    回复 2
    • 乘风破浪
      乘风破浪
      2018-07-10

      非常感谢您的回答,我用

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

      用scroll-view的bindscrolltolower()事件代替nreachBottom()效果一样;因为我的item是长页面,我也无法计算其高度(每个list高度不一致,根据接口数据显示),非常感谢。


      2018-07-10
      回复
    • sunshine
      sunshine
      2018-12-10

      使用scroll-view 向Y轴滑动  swiper的滑动就无效了

      2018-12-10
      回复
  • Real苏先生
    Real苏先生
    2019-01-15

    谢谢  参考了您的,我也使用了

    bindscrolltolower()事件代替nreachBottom()
    2019-01-15
    赞同
    回复
  • sunshine
    sunshine
    2018-12-10

    你好  你的具体如何解决的  可以分享一下吗  我现在也遇到这个问题

    2018-12-10
    赞同
    回复 11
    • 韩旭
      韩旭
      2018-12-10

      方法1:swiper跟onreachBottom同时产生的话,默认的高度就是屏幕高度400,你上拉后还是400。需要你自己把页面高度设定成活动的,上拉的时候重新设定页面高度。例如第一次触发是屏幕高度400,第二次的时候加上你数据的高度,自己计算触发高度。style="height:{{winHeight}}px" 。

      JS文件里自己定义winHeight,

      onReachBottom: function ()  函数里设定winHeight

      that.setData({

      winHeight: that.data.winHeight + res.windowHeight

      });

      方法2:参考看第一场雪的,用另一种方法写
      2018-12-10
      回复
    • 韩旭
      韩旭
      2018-12-10

      <view class='listBox'>

      <scroll-view scroll-x="true" class="swiper-tab">

      <view class="{{currentTab==index ? 'on' : ''}}" wx:for="{{navList}}" data-id="{{item.id}}" data-current="{{index}}" bindtap="swichNav">{{item.name}}</view>

      </scroll-view>


      <swiper class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange">

      <swiper-item>

      <scroll-view scroll-y="true" style="height: {{winHeight-15}}px">

      <block wx:for='{{goodsList}}' wx:for-item="goods">

      <navigator class='hot_con'>

      <image src='{{goods.primary_pic_url}}?x-oss-process=image/interlace,1/format,jpg/quality,q_60' mode='widthFix'></image>

      <view class='hot_words'>

      <text>{{goods.name}}</text>

      <text></text>

      </view>

      <view class='hot_price'>

      <text>¥{{goods.market_price}}</text>

      <label></label>

      </view>

      </navigator>

      </block>

      </scroll-view>

      </swiper-item>

      </swiper>


      </view>


      2018-12-10
      回复
    • sunshine
      sunshine
      2018-12-10回复韩旭

      但是我现在的问题的  onReachBottom不触发  一次都没有  很难受

      2018-12-10
      回复
    • sunshine
      sunshine
      2018-12-10回复韩旭

      内容是这样的

      2018-12-10
      回复
    • sunshine
      sunshine
      2018-12-10回复韩旭

      <swiper vertical="true" style="height:{{winHeight}}px" current="{{ currentOutSide }}" duration="300" bindchange="changeSwiper">

      <block>

      <swiper-item wx:key="unique" wx:for="{{ recommendList }}" wx:for-index="idx" wx:for-item="item">

      <scroll-view scroll-y="true" style="height: {{winHeight-15}}px">

      <swiper class="swiper-box {{ item.images.length > 1?'':'hideDot' }}" style="height:{{winHeight}}px" current="{{ currentPic }}" indicator-dots="true">

      <block>

      <swiper-item class="swiper-box-item" wx:key="unique" wx:for="{{ item.images }}" wx:for-index="img-idx" wx:for-item="imgItem">

      <image lazy-load="true" mode='aspectFit' src='{{ imgItem.imageUrl }}'></image>

      </swiper-item>

      </block>

      </swiper>

      </scroll-view>

      </swiper-item>

      </block>

      </swiper>

      这样就划不动了

      2018-12-10
      回复
    查看更多(6)
  • 乘风破浪
    乘风破浪
    2018-07-10

    非常感谢您的回答,我用

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

    用scroll-view的bindscrolltolower()事件代替nreachBottom()效果一样;因为我的item是长页面,我也无法计算其高度(每个list高度不一致,根据接口数据显示),非常感谢。

    2018-07-10
    赞同
    回复 1
    • sunshine
      sunshine
      2018-12-10

      使用scroll-view 向Y轴滑动  swiper的滑动就无效了

      2018-12-10
      回复
登录 后发表内容