以手机端基础贡献页面为例———下拉刷新，上拉加载相关代码解析

一，下拉加载

1.1,下拉加载主要依靠封装好的components-》navTab-》refresh.vue 组件来实现。

通过touchstart，touchmove，touchend方法监听页面滚动，滚动一定距离后请求父组件的刷新接口，刷新数据。

二、上拉刷新

2.1，主要通过uniapp中的scroll-view组件来实现。

相关参数：

1，scroll-y：true 允许纵向滚动

2，@scrolltolower事件 ：滚动到底部，会触发 scrolltolower 事件

3，scroll-with-animation：在设置滚动条位置时使用动画过渡

2.2,加载方法注释：

loadData(func) {

 //hasNew有三种状 态：more，loading，n0More，状态不为more时不请求 
if(self.list[self.currentTab].hasNew != 'more'){   
return false;  
}

var url = '';
var offset = self.list[self.currentTab].offset;  //每次请求初始位置
var tabItem = self.tabs[self.currentTab];



self.list[self.currentTab].hasNew = 'loading';
var $data = {
offset: offset,  //请求数据 位 置
limit: 15,  //请求数据个数
search: ''
}
$data.typeId = tabItem.typeId;
if ($data.typeId == 5) {
$data.scoreTypeId = tabItem.scoreTypeId;
}


self.$app.postAjax('/score/typeItem/getList', {
data: $data,
success: function(res) {
if (func && typeof func == 'function') {
func();
}

 //第一次请求清空列表数据
if (offset == 0) {
self.list[self.currentTab].data = [];
}

//如果请求返回数据长度小于请求长度，则 说明请求到最后一页，将标志hasNew置为‘noMore ’，否则则为‘more ’
if (res.rows.length < 15) {
self.list[self.currentTab].hasNew = 'noMore';
} else {
self.list[self.currentTab].hasNew = 'more';
}

//将请求数据进行拼接，刷新开始 请求位置
self.list[self.currentTab].data = self.list[self.currentTab].data.concat(res.rows)
self.list[self.currentTab].offset += res.rows.length;

}
});
},

2.3、数据为空时的处理

1，当返回数据长度为零或者是否加载标志hasNew为‘noMore’时，调用封装好的empty组件显示空图标

2，使用uniapp中的LoadMore 加载更多 组件来显示当前加载状态，其中status可设置状态，loading 的状态，可选值：more（loading前）、loading（loading中）、noMore（没有更多了）

标签：请求,为例,self,list,hasNew,上拉,data,currentTab,加载
来源： https://www.cnblogs.com/cfcastiel/p/14469895.html