vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库

一提到移动端的下拉刷新上拉翻页，你可能就会想到iScroll插件，没错iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。iScroll不仅仅是滚动。它可以处理任何需要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。iScroll的强大毋庸置疑，本人也非常欢迎大家使用iScroll。还有dropload也是挺好用的。

本文讲到的上拉翻页加载更多方法的核心思路其实很简单，思路一看就懂，大道至简嘛，虽然代码很少，不过实现过程中的视图与数据的交互逻辑还有有些复杂，不细心的话，很容易蒙圈，往往特别简单的东西，背后都有很细致入微的逻辑关系。
本文的方法，初步是在vue-cli的环境下实现，代码包含了template和script，方法有用到document，window对象，初版有些粗糙。

本文实现上拉翻页加载更多的核心思路就是：如果“正在加载”这个层被上拉超出页面底部，就触发加载下一页的方法，对就是这么简单！

本文方法最繁琐的地方主要在于交互方面：几个“正在加载”的层根据数据渲染的时机和上拉操作时候的显隐控制。方法里面大多数语句后面都有注释讲解，细心点应该能理顺逻辑。本文只写了上拉翻页的功能展示，下来刷新更简单也同样的道理(每次触发都只加载第一页就可以了)，本文的方法思路同样可以运用于jquery、react、angular……等其他框架，因为简单，所以便捷。理解思路最重要，理解以后完全可以自己手写。

有时候看似复杂的问题，往往可以剑走偏锋，曲线救国！

好了下面直接上代码！

1、template部分：

                                  
<template>
    
<div v-
if
=
"!!dataList.length"
>
        
<div v-
for
=
"(item,index) in dataList"
>
            
<!-- 数据展示列表 -->
        
</div>
        
<div id=
"loadMore"
v-show=
"loadMore"
>正在加载</div><!-- 第一次加载数据 -->
        
<div id=
"loadMoreing"
v-show=
"loadMoreing"
>正在加载</div><!-- 上拉加载数据 -->
        
<div id=
"noMoreData"
v-show=
"loadMore?false:!loadMoreing"
>已显示全部任务</div><!-- 所有数据加载完成 -->
    
</div>
    
<div id=
"loadMoreing"
v-
else
-
if
=
"loadMoreing"
>正在加载</div><!-- 页面渲染时 -->
    
<div 
class
=
"noData"
v-
else
>没有数据</div>
</template>
           
         

2、script部分

                                  
export
default
{ 
    
data () { 
        
return
{ 
            
dataList:
new
Array,
            
dataCurPage:1,
// 数据页码
            
loadMore:
true
,
// 第一次加载数据时的正在加载
            
loadMoreing:
true
,
// 上拉加载数据时的正在加载
        
}
    
},
    
mounted:
function
(){ 
        
let
onScroll = window.addEventListener(
'scroll'
, 
this
.scrollRun);
// 监听滚动
    
},
    
methods:{ 
        
getdataList:
function
(){ 
            
this
.loadMoreing = 
true
;
            
let
_self = 
this
;
            
$.ajax({ 
                
type:
"post"
,
                
async: 
false
,
                
timeout : 10000,
                
dataType:
"json"
,
                
url:
""
,
                
data:{curPage:_self.dataCurPage},
                
success:
function
(data){ 
                    
_self.loadMoreing = 
false
;
// 接收到数据时，隐藏正在加载
                    
if
(!!data.dataList.length){ 
// 如果有数据
                        
if
(_self.dataCurPage==1){ 
// 当加载第1页数据时
                            
_self.dataList = 
new
Array;
// 第1页清空数据
                            
if
(data.dataList.length>0){ 
// 如果第1页数据条数大于0
                                
data.dataList.forEach(
function
(ele,i){ 
                                    
_self.dataList.push(ele);
// 填充页面数据
                                
})
                                
_self.loadMore = 
true
;
// 显示正在加载(在屏幕底部以外)
                            
}
else
{ 
                                
_self.loadMore = 
false
;
// 没有数据则隐藏正在加载
                            
}
                        
}
else
{ 
// 当加载第2页及其以后的数据时
                            
if
(data.dataList.length>0){ 
                                
data.dataList.forEach(
function
(ele,i){ 
                                    
_self.dataList.push(ele);
// 填充页面数据
                                
})
                                
_self.loadMore = 
true
;
// 显示正在加载(在屏幕底部以外)
                            
}
else
{ 
                                
_self.loadMore = 
false
;
// 没有数据则隐藏正在加载
                            
}
                        
}
                        
//如果总页数==当前页=>没有更多数据了
                        
if
(data.totalPage==_self.dataCurPage){ 
                            
_self.loadMore = 
false
;
                            
_self.loadMoreing = 
false
;
                        
}
                    
}       
                
},
                
error:
function
(xhr,status,error){ 
                    
console.log(
"错误"
,xhr,status,error);
                    
if
(status == 
"timeout"
){_self.loadMoreing = 
false
;weui.toast(
'请求超时'
, 800);}
                
},
                
complete:
function
(){_self.loadMoreing = 
false
;}
            
})
        
},
        
scrollRun:
function
(){ 
// 核心代码
            
if
(
this
.loadMore == 
true
&&!!document.getElementById(
"loadMore"
)){ 
//如果总共有一页以上数据，才运行
                
let
bodyWidth = document.body.offsetWidth;
                
let
bodyHeight = window.innerHeight*(375/bodyWidth);
// 以6s屏幕为基准比例
                
let
loadMoreTop = document.getElementById(
"loadMore"
).getBoundingClientRect().top*(375/bodyWidth);
//loadMore距离顶部的距离
    
                
if
(bodyHeight-loadMoreTop>20){ 
//loadMore被拉出底部20px时
                    
// console.log("bodyHeight",bodyHeight,"loadMoreTop",loadMoreTop,"差值",bodyHeight-loadMoreTop,"页码",this.dataCurPage+1);
                    
this
.loadMore = 
false
;
//停止运行scrollRun，否则会触发加载所有页面
                    
this
.getMoreList(_self.dataCurPage++);
                
}
            
}
        
},
    
}
}
           
         

转载于:https://www.cnblogs.com/zhangycun/p/7283547.html

你可能感兴趣的文章