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

<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>

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