微信小程序开发之scroll-view上拉加载数据实现

一、开发思路

1、使用小程序的scroll-view组件中提供了一个bindscrolltolower属性监听组件的滑动到了底部

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html可以点击链接查看scroll-view组件拥有的属性

2、组件滑动到底部这个事件会频繁触发、所以为了防止多次触发我们定义一个状态用于管理加载的状态、如果上拉数据状态在加载中就不去做网络请求加载数据

3、上拉的时候对page进行加1然后获取网络请求

4、数据获取成功对获取的数据进行叠加

二、实现代码

1、布局

布局中我使用了scroll-view并且使用了bindscrolltolower这个属性绑定了我的lowe函数

  <scroll-view scroll-y="true" scroll-y="{
   
   {isScroll}}" enable-back-to-top='true' bindscrolltolower='lower' style='overflow: scroll;-webkit-overflow-scrolling:touch;margin-top:130px;'>
    <block wx:key="index" wx:for="{
   
   {dataShow}}">
      <view data-index='{
   
   {index}}' class="order-item">
        <view class="contentBody">
          <view class='title'>
            {
   
   {item.company}}
          </view>
          <view class='time'>
          {
   
   {item.time}}
          </view>
          <view class='title'>
            <text>{
   
   {item.university}}</text>
            <text style='margin-left:32px'>{
   
   {item.place}}</text>
          </view>
          <view style='margin-top: 8px'>
            <text class='origin'>来源</text>
            <text class='originInfo'>{
   
   {item.university}}/就业网</text>
          </view>
        </view>
      </view>
    </block>
    <view wx:if='{
   
   {noData}}'class="noData">没有更多了~</view>
  </scroll-view>

2、js中的实现

stopLoadMoreTiem是我在data中定义的变量默认是false

定义page和stopLoadMoreTiem

下面就是布局中组件中bindscrolltolower绑定的函数、 that.getList()就是网络请求方法

//下拉加载
  lower: function() {
    var that = this;
    if (that.stopLoadMoreTiem) {
      return;
    }
    this.setData({
      page: this.data.page + 1 //上拉到底时将page+1后再调取列表接口
    });
    that.getList();

  },

网络请求方法中网络请求成功改变stopLoadMoreTiem的状态网络请求成功没有数据的时候我给nodata赋值了，nodata布局中负责显示没有更多数据 布局的显示

/**
   * 请求网络获取列表数据
   */
  getList() {
    var that = this;
    that.stopLoadMoreTiem = true;
    // if (!that.stopLoadMoreTiem) {
     
    // }
    wx.showLoading({title:'数据读取中...'})
    wx.request({
      url: app.globalData.apiHost + '/page?page=' + that.data.page + '&size=10',
      method: 'GET',
      data: {
        queryStartDate: that.data.queryStartDate,
        queryEndDate: that.data.queryStartDate,
      },
      header: {
        'Accept': 'application/json'
      },
      success: function(res) {
        wx.hideLoading();
        if (!res.data.content || res.data.content.length === 0) {
          that.setData({
            noData: true,
          })
          return;
        }
        if (that.stopLoadMoreTiem) {
          if (res.data.content && res.data.content.length > 0) {
            that.setData({
              dataShow: that.data.dataShow.concat(res.data.content),
              total: res.data.totalElements,
            })
          }
        } else {
          that.setData({
            dataShow: res.data.content,
            total: res.data.totalElements,
          })
        }
        that.stopLoadMoreTiem = false;
      }
    })
  },

下面这块代码是关键代码这块我写的如果是上拉加载并且获取的数据长度大于0我在这里使用concat关联将数组叠加。

dataShow: that.data.dataShow.concat(res.data.content),

if (that.stopLoadMoreTiem) {
          if (res.data.content && res.data.content.length > 0) {
            that.setData({
              dataShow: that.data.dataShow.concat(res.data.content),
              total: res.data.totalElements,
            })
          }
        } else {
          that.setData({
            dataShow: res.data.content,
            total: res.data.totalElements,
          })
        }

以上就是上拉加载更多的数据有问题请留言下拉刷新也很简单使用bindscrolltoupper这个属性

送上一波福利