标签：请求 为例 self list hasNew 上拉 data currentTab 加载

一，下拉加载

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。