本文共 2794 字，大约阅读时间需要 9 分钟。

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

一、开发思路

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

.可以点击链接查看scroll-view组件拥有的属性

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

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

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

二、实现代码

1、布局

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

       
          
             
                
       
                    {   {   item.company}}          
                 
       
                  {   {   item.time}}          
                 
                   
        
         { { item.university}}
                    
        
         { { item.place}}
                  
                 
                   
        
         来源
                    
        
         { { item.university}}/就业网
                  
               
            
         
        
    
     没有更多了~
      
   

2、js中的实现

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

定义page和stopLoadMoreTiem

//下拉加载  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,  })}