yarn add v-scroller   or   npm install v-scroller --save

import scroller from 'v-scroller'
import 'v-scroller/dist/v-scroller.css'
Vue.use(scroller)

<scroller />

<template>
	<!--verticalMode and infinite and refresh-->
	<scroller
		ref="scroll"
		@downFresh="downfresh"
		@upLoad="upload"
		@scroll="showPosition"
		@afterScroll="showPosition"
		:snapping="snapping"
		:smooth="smooth"
		:isDownFresh="isDownFresh"
		:isUpLoad="isUpLoad"
		>
		<div slot="nomore" class="nomore">there is nomore data~</div>
		<ul>
			<li :class="{active:index%2==0}" v-for="(item,index) of num" :key="item">number {{item}} item</li>
		</ul>
	</scroller>
	
	<!--nesting scroller with horizonalMode and verticalMode-->
	<scroller
		ref="scroll"
		:snapping="snapping"
		@scroll="showPosition"
		@afterScroll="showPosition"
		>
		<div class="_testBox" v-for="item of 20">
			<scroller
				@upLoad="upload"
				:snapping="snapping"
				:isUpLoad="isUpLoad"
				:horizonalMode="horizonalMode"
				>
				<div class="boxRoom">
					<div :class="{active:index%2==0}" class="box" v-for="(item,index) of num" :key="item">{{item}}</div>		
				</div>
			</scroller>
		</div>
		<div slot="nomore" class="nomore">there is nomore data~</div>
	</scroller>
	<!--goTop using the scrollTo() function-->
	<div class="record" @click="goTop">
		x:{{left}},y:{{top}}
	</div>
</template>
<script>
export default{
	data(){
		return{
			num:[],
			snapping:true,
			isDownFresh:true,
			isUpLoad:true,
			smooth:true,
			horizonalMode:true,
			left:0,
			top:0
		}
	},
	created(){
		for(let i=0;i<5;i++){
			this.num.push(i)
		}
	},
	methods:{
		downfresh(done){
			console.log('refreshing finished')
			let b = this.num[0];
			for(let i = b;i>=b-5;i--){
				this.num.unshift(i);
			}
			done() // you should call the done to close the loading
		},
		upload(done){
			console.log('infinite loading finished')
			if(this.num[this.num.length-1]<25){
				let b = this.num[this.num.length-1];
				for(let i = b+1;i<=b+5;i++){
					this.num.push(i);
				}
				done() // you should call the done to close the loading
			}else{
				this.$refs.scroll.closeLoad();
			}
		},
		showPosition(){
			let {x:left,y:top} = this.$refs.scroll.getPosition();
			this.left = left;
			this.top = top;
		},
		goTop(){
			this.$refs.scroll.scrollTo(0,true);
			this.showPosition();
		}
	}
}
</script>

	created(){
		//when the component created ,use the ajax function firstly
		this.refreshData();
	},
	methods:{
		refreshData(done){
			const data = `telephone=${this.$store.state.BookOrderInfo.telephone}&start=${this.start}&limit=${this.limit}`
			this.$http({
				method:'POST',
				url:this.$_URL+'/api/listHistoryRecord',
				data:data
			})
			.then(
				res=>{
					if(res.data.code == '0000'){
						//if nomore data from the back-end ,use the plugin function closeLoad()
						if(res.data.data.length==this.History.length){
							this.$refs.scroller.closeLoad();
						}else{
							this.History = res.data.data;
							done()
						}
					}
			})
			.catch(
				err=>console.log(err)
			)
		},
		upLoad(done){
			this.limit+=this.limit;//this is the length of data while you request the back-end
			this.refreshData(done);
		}
	}