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

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

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

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

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

好了下面直接上代码！

1、template部分：

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>

2、script部分

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++);                 }             }         },     } }