其他分享
首页 > 其他分享> > 以手机端基础贡献页面为例———下拉刷新,上拉加载相关代码解析

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

作者:互联网

一,下拉加载

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