收藏
回答

onReachBottom只触发了一次

问题模块
API和组件

1、基础库版本 大于1.5.0

2、onReachBottom 可以触发一次,但是不在触发第二次及以上

3、模拟器和真机都是这个情况

4、我的场景是与swiper结合使用。


最后一次编辑于  2017-09-18
回答关注问题邀请回答
收藏

25 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-11-10

    请参见24楼的解答。

    2017-11-10
    赞同
    回复
  • 名字不能缺
    名字不能缺
    2017-11-10

    解决了吗

    2017-11-10
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-10-09

    感谢两位的关注。


    这里的要点是:“onReachBottom”实际上是表示页面page节点本身的底部区域是否进入了可视区域。也就是说,无论scroll-view还是任何其他的方式,只要页面page节点的底部区域进入了可视区域,onReachBottom就会被触发(即使page节点本身没有滚动条)。


    在1.5.0版本中,做这个检测的时候增加了一个附加条件:必须是page节点底部区域离开可视区域之后再次进入可视区域时,才会再次触发onReachBottom。推测就是这一个附加条件导致了楼主的代码失效。但我们暂时没有移除这个附加条件的计划,因为这个附加条件在逻辑上是合理的。如果这个附加条件导致了其他问题(有其他反馈的话),我们会尝试解决。


    如果需要使用overflow-y并检测是否滚动到达底部,可以在底部放置一个view节点,并在touchmove时,用 wx.createSelectorQuery API 来检测这个view节点是否进入可视区域。这种做法可以准确检测滚动触底。


    如果还有疑问,欢迎继续反馈讨论,谢谢!

    2017-10-09
    赞同
    回复
  • Zzz
    Zzz
    2017-10-09

    是稍微上拉,打错了,因为上拉加载是由于页面触底,才会上拉加载,虽然overflow可以让溢出的内容显示,但是它好像并不是让页面高度拉伸了,所以在上拉加载时,虽然有滚动条,但是机器还是认为当前页面已经触底,所以会出现稍微上拉就请求数据的现象,我理解是这样的


    问题:如果不使用overflow-y,我该怎么在tab选项卡中同时实现上拉加载和下拉刷新两个功能呢?

    2017-10-09
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-10-09

    首先我们不推荐用overflow-y,这方面的支持会比较差。这个bug我们需要进一步调查。


    稍微下拉就请求数据”是什么意思呢?

    2017-10-09
    赞同
    回复
  • Zzz
    Zzz
    2017-10-09

    由于overflow-y,导致稍微下拉就请求数据,且只请求一次@LastLeaf 

    2017-10-09
    赞同
    回复
  • Zzz
    Zzz
    2017-10-09

    @LastLeaf 

    2017-10-09
    赞同
    回复
  • Zzz
    Zzz
    2017-10-09

    page{

    height:100%;

    }

    .noOrder{

    margin: 50px 200rpx;

    color: #C3C3C3;

    font-size: 30rpx;


    }

    swiper-item{

    overflow-y: auto;

    }

    .containers{

    height: 100%;

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

    font-family: "微软雅黑"

    }

    .swiper-tab{

    width: 100%;

    height: 80rpx;

    z-index: 999;

    position: absolute;

    top: 0;

    left: 0;

    }

    .swiper-tab-item{

    font-size: 30rpx;

    display: inline-block;

    width: 19.33%;

    height: 75rpx;

    color: #666666;

    }

    .text{

    margin-top: 20rpx;

    line-height: 40rpx;

    text-align: center;

    border-right: 1px solid #F4F4F4;

    }

    .four{

    margin-top: 20rpx;

    line-height: 40rpx;

    text-align: center;

    border-right:none;

    }

    .on{

    color: #f10b2e;

    border-bottom: 5rpx solid #f10b2e;

    }


    .swiper-box{

    background-color: #F4F4F4;

    height: 100%;

    margin-top: 40px;

    }

    .swiper-box view{

    text-align: center;

    }

    .orderBox{

    background-color: #FFFFFf;

    margin-bottom: 20rpx;

    }

    .orderTime{

    border-bottom: 1px solid #F5F5F5;

    border-top: 1px solid #F5F5F5;

    display: flex;

    height: 40px;

    line-height: 40px;

    font-size: 31rpx;

    justify-content: space-between;

    }

    .orderTime text{

    margin: 0 30rpx;

    }

    .orderDetails{

    display: flex;

    flex-direction: row;

    }

    .orderImg{

    width: 200rpx;

    height: 95px;


    }

    .img{

    margin-top: 15px;

    width: 120rpx;

    height: 120rpx;

    }

    .information{

    width: 440rpx;

    height: 95px;


    font-size: 31rpx;

    }

    .information-one{

    display: block;

    height: 35px;

    margin-top: 10px;

    text-align: center;


    }

    .right{

    width: 60rpx;

    height: 60rpx;

    position: relative;

    top: 30px;

    right: 5rpx;

    }

    .orderprice{

    border-top: 1px solid #F5F5F5;

    font-size: 31rpx;

    height: 40px;

    line-height: 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    }

    .op-price{

    margin-left:30rpx;

    }

    .refund-one{

    border: 1px solid #FE2D55;

    color: #FE2D55;

    border-radius: 5px;

    width: 190rpx;

    height: 25px;

    line-height: 25px;

    text-align: center;

    margin-left: 100rpx;

    }

    .refund{

    border: 1px solid #FE2D55;

    color: #FE2D55;

    border-radius: 5px;

    width: 190rpx;

    height: 25px;

    line-height: 25px;

    text-align: center;

    margin-right:30rpx;

    }

    button{

    border: 1px solid #FE2D55;

    color: #FE2D55;

    border-radius: 5px;

    width: 190rpx;

    height: 25px;

    line-height: 25px;

    text-align: center;

    margin-right:30rpx;

    margin-left: 0;

    padding: 0;

    box-sizing: content-box;

    background-color: #FFFFFF;

    font-size: 31rpx;

    }


    2017-10-09
    赞同
    回复
  • Zzz
    Zzz
    2017-10-09

    <swiper current="{{currentTab}}" class="swiper-box" duration="100" bindchange="bindChange">

    <swiper-item>

    <block wx:if='{{orderlistone.length>0}}'>

    <view class='orderBox' wx:for="{{orderlistone}}" wx:for-item="item">

    <view class='orderTime'>

    <text>{{item.time}}</text>

    <text>待付款</text>

    </view>

    <view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>

    <view class='orderImg'>

    <image src='{{orderImg.daima}}' class='img'></image>

    </view>

    <view class='information'>

    <text class='information-one'>{{item.content}}</text>

    <text class='information-one'>{{item.address}}</text>

    </view>

    <image src="{{orderImg.arrow_right}}" class="right"></image>

    </view>

    <view class='orderprice'>

    <text class='op-price'>跑腿费:{{item.price}}元</text>

    <text class='refund-one'>取消付款</text>

    <text class='refund'>继续付款</text>

    </view>

    </view>

    </block>

    <block wx:else>

    <text class='noOrder'>您还没有订单(下拉刷新)</text>

    </block>

    </swiper-item>

    <swiper-item>

    <block wx:if='{{orderlisttwo.length>0}}'>

    <view class='orderBox' wx:for="{{orderlisttwo}}" wx:for-item="item">

    <view class='orderTime'>

    <text>{{item.time}}</text>

    <text>待接单</text>

    </view>

    <view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>

    <view class='orderImg'>

    <image src='{{orderImg.daima}}' class='img'></image>

    </view>

    <view class='information'>

    <text class='information-one'>{{item.content}}</text>

    <text class='information-one'>{{item.address}}</text>

    </view>

    <image src="{{orderImg.arrow_right}}" class="right"></image>

    </view>

    <view class='orderprice'>

    <text class='op-price'>跑腿费:{{item.price}}元</text>

    <text class='refund' catchtap='onRefund'>撤销订单</text>

    </view>

    </view>

    </block>

    <block wx:else>

    <text class='noOrder'>您还没有订单(下拉刷新)</text>

    </block>

    </swiper-item>

    <swiper-item>

    <block wx:if='{{orderlistthree.length>0}}'>

    <view class='orderBox' wx:for="{{orderlistthree}}" wx:for-item="item">

    <view class='orderTime'>

    <text>{{item.time}}</text>

    <text>待完成</text>

    </view>

    <view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>

    <view class='orderImg'>

    <image src='{{orderImg.daima}}' class='img'></image>

    </view>

    <view class='information'>

    <text class='information-one'>{{item.content}}</text>

    <text class='information-one'>{{item.address}}</text>

    </view>

    <image src="{{orderImg.arrow_right}}" class="right"></image>

    </view>

    <view class='orderprice'>

    <text class='op-price'>跑腿费:{{item.price}}元</text>

    <text class='refund'>申请退款</text>

    </view>

    </view>

    </block>

    <block wx:else>

    <text class='noOrder'>您还没有订单(下拉刷新)</text>

    </block>

    </swiper-item>

    <swiper-item>

    <block wx:if='{{orderlistfour.length>0}}'>

    <view class='orderBox' wx:for="{{orderlistfour}}" wx:for-item="item">

    <view class='orderTime'>

    <text>{{item.time}}</text>

    <text>已完成</text>

    </view>

    <view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>

    <view class='orderImg'>

    <image src='{{orderImg.daima}}' class='img'></image>

    </view>

    <view class='information'>

    <text class='information-one'>{{item.content}}</text>

    <text class='information-one'>{{item.address}}</text>

    </view>

    <image src="{{orderImg.arrow_right}}" class="right"></image>

    </view>

    <view class='orderprice'>

    <text class='op-price'>跑腿费:{{item.price}}元</text>

    </view>

    </view>

    </block>

    <block wx:else>

    <text class='noOrder'>您还没有订单(下拉刷新)</text>

    </block>

    </swiper-item>

    <swiper-item>

    <block wx:if='{{orderlistfive.length>0}}'>

    <view class='orderBox' wx:for="{{orderlistfive}}" wx:for-item="item">

    <view class='orderTime'>

    <text>{{ordertime}}</text>

    <text>退款中</text>

    </view>

    <view class='orderDetails' catchtap='onDetails' data-orderid='{{item.id}}'>

    <view class='orderImg'>

    <image src='{{orderImg.daima}}' class='img'></image>

    </view>

    <view class='information'>

    <text class='information-one'>{{item.content}}</text>

    <text class='information-one'>{{item.address}}</text>

    </view>

    <image src="{{orderImg.arrow_right}}" class="right"></image>

    </view>

    <view class='orderprice'>

    <text class='op-price'>跑腿费:{{item.price}}元</text>

    <button open-type='contact'>联系客服</button>

    </view>

    </view>

    </block>

    <block wx:else>

    <text class='noOrder'>您还没有订单(下拉刷新)</text>

    </block>

    </swiper-item>

    </swiper>


    2017-10-09
    赞同
    回复
  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2017-10-09

    麻烦楼上两位提供一下wxml和wxss文本,以便我们进一步分析。另外,麻烦 @IIIIIIIIF 描述一下你遇到的具体问题(你遇到的具体问题不一定一样),谢谢!

    2017-10-09
    赞同
    回复

正在加载...