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

时间  2019-11-12
标签 vue10 vue 代码 实现 翻页 加载 更多 数据 手写 下拉 刷新 引用 任何 第三方 插件 栏目 JavaScript 繁體版
原文   原文链接

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

一提到移动端的下拉刷新上拉翻页，你可能就会想到iScroll插件，没错iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。iScroll不单单是 滚动。它能够处理任何须要与用户进行移动交互的元素。在你的项目中包含仅仅4kb大小的iScroll，你的项目便拥有了滚动，缩放，平移，无限滚动，视差滚动，旋转功能。iScroll的强大毋庸置疑，本人也很是欢迎你们使用iScroll。还有dropload也是挺好用的。
本文讲到的上拉翻页加载更多方法的核心思路其实很简单，思路一看就懂，大道至简嘛，虽然代码不多，不过实现过程当中的视图与数据的交互逻辑还有有些复杂，不细心的话，很容易蒙圈，每每特别简单的东西，背后都有很细致入微的逻辑关系。
本文的方法，初步是在vue-cli的环境下实现，代码包含了template和script，方法有用到document，window对象，第一版有些粗糙。javascript

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

本文方法最繁琐的地方主要在于交互方面：几个“正在加载”的层根据数据渲染的时机和上拉操做时候的显隐控制。方法里面大多数语句后面都有注释讲解，细心点应该能理顺逻辑。本文只写了上拉翻页的功能展现，下来刷新更简单也一样的道理(每次触发都只加载第一页就能够了)，本文的方法思路一样能够运用于jquery、react、angular……等其余框架，由于简单，因此便捷。理解思路最重要，理解之后彻底能够本身手写。
有时候看似复杂的问题，每每能够剑走偏锋，曲线救国！java

好了下面直接上代码！react

一、template部分：jquery

1
2
3
4
5
6
7
8
9
10
11
12
<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>

二、script部分ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
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++);
                 }
             }
         },
     }
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程