微信小程序上拉加载

2018-03-27

最近做微信小程序的上拉加载功能，直接上代码（样式使用的weui）：

js代码

/**
 * 下拉刷新
 */
searchScrollLower: function () {
  var that = this;
  if (!that.data.searchLoadingComplete){
    that.setData({
      searchLoading: true
    })
  }
  if (that.data.searchLoading && !that.data.searchLoadingComplete) {
    that.setData({
      searchPageNum: that.data.searchPageNum + 1,  //每触发一次上拉事件，把searchPageNum+1  
      isFromSearch: false  //触发到上拉事件，把isFromSearch设为为false  
    });
    that.fetchSearchList();
  }
},
/**
 * 下拉刷新获取数据
 */
fetchSearchList: function () {
  var that = this;
  wx.request({
    url: 'https://接口地址/ylxcx/article?limit=10&classId=' + that.data.classId + '&page=' + that.data.searchPageNum,
    method: 'GET',
    success: function (res) {
      console.log(res.data.data)
      if (res.data.data.length == 0){
        console.log("no data")
        that.setData({
          searchLoading: false,
          searchLoadingComplete: true
        })
      }else{
        that.setData({
          doctorList: that.data.doctorList.concat(res.data.data),
          searchLoading: false
        })
      }
    }
  })
}

wxml代码

<scroll-view class='yr-doctor-card' scroll-y="true" bindscrolltolower="searchScrollLower">
  <view class="page__bd">
    <block wx:for="{{doctorList}}" wx:for-item="item" wx:key="Id">
      <navigator url="../news/news?moduleId={{item.Id}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
        <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
          <image class="weui-media-box__thumb" src="{{item.image}}" />
        </view>
        <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
          <view class="weui-media-box__title">{{item.title}}</view>
          <view class="weui-media-box__desc">
            <view class='yr-text'>{{item.abstract}}</view>
          </view>
        </view>
      </navigator>
    </block>
    <view class="weui-media-box weui-media-box_appmsg">
      <view class="weui-media-box__desc yr_text_center"  hidden="{{!searchLoading}}">
        <view class="weui-loading"></view>
        <view class="weui-loadmore__tips">正在加载</view>
      </view>
      <view class="weui-media-box__desc yr_text_center"  hidden="{{!searchLoadingComplete}}">
        <view class="weui-loadmore__tips">已加载全部</view>
      </view>
    </view>
  </view>
</scroll-view>

效果如图