vue scoller下拉加载上拉刷新

1. 安装

 	 npm i vue-scroller -D

2. 引用
   在main.js中引入

	 //上拉加载 下拉刷新
	import VueScroller from "vue-scroller"
	Vue.use(VueScroller);

3. html

<template>
		<scroller 
		:on-refresh="refresh"  //下拉刷新方法
		:noDataText="noDataText"   //下拉加载无新数据提示的文字
		:on-infinite="infinite"  //上拉加载
		style="padding-top:20px" //如果 该模块在header 之下等  需要位置下移的话用padding-top 控制
		ref="myscroller" //插件对应的dom>
			//自由填充start
            <div v-for:' (item,index) in mydata   :key = "index" '>
            	<span>{{item.name}}</span>
            	<span>{{item.sex}}</span>
            </div>
           //自由填充end
            </scroller>
</template>

5. js

export default {
	import axios from 'axios' //引入axios（）
	data(){
		return{
				 hasDate:false,//是否存在数据 作为开关存在
                 mydata :[]，//从后台请求到的数据
             	 current_page:1,//当前页
                 pageSize:10，//总页数
                 noDataText:'没有更多数据了'
		}
	},
	methods:{
		getList()｛
			var that = this;
			aixos({
				url:'yourUrl',
				method:'get'
			}).then(function(res){
				var lastPage = res.data.last_page //获取最后一页或者总页数
	            if(res.data.last_page = that.page){ //如果请求页数为最后一页
	                that.hasDate = false //如果是最后一页则无数据
	            }else{
	                that.hasDate = true //反之有数据
	            }
	            if(that.page==1){ // 请求的是否为第一页数据
	                that.mydata =res.data.data 
	            }else{
	                that.mydata = that.mydata .concat(res.data.data) //非第一页 将新的数据添加到老数据中去
	            }
			})
		｝，
		refresh(){
	        this.page= 1;//重置页数刷新每次页数都是第一页
	        this.hasData=true;//重置数据判断
	         setTimeout(function(){
	             this.getList();
	             this.$refs.myscroller.finishPullToRefresh();//刷新完毕关闭刷新的转圈圈
	         }.bind(this),500)
	         $('.pull-to-refresh-layer').css('opacity',1)
	     },
	     infinite(done){
	        // console.log('加载了')
	        if(this.noDate){
		            // console.log('确实是没数据了')
		                this.$refs.myscroller.finishInfinite(true);//停止无限加载，提示无数据了
		        }else{
		            setTimeout(() => {
		                    this.page++;//下拉一次页数+1
		                    this.getList();
		                    done();//进行下一次加载操作
		            }, 1500);
		        }
	    }
	},
	mounted(){
		this.getList()//进页面要请求一次渲染页面
	}
}