微信小程序开发之scroll-view上拉加载数据实现_微信小程序开发 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这个属性

送上一波福利

微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取