A mobile Vue plugin for scroller
Please go to the release to see version logs.
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)
insert the vue.js
script firstly<link rel="stylesheet" href="node_modules/v-scroller/dist/v-scroller.css"></link >
<script src="node_modules/v-scroller/dist/v-scroller.js"></script>
<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>
It’s suggested that write a single function for ajax in methods and then use the ajax function at the lifeCircle of created,you can continue to use it at the plugin emiting event – upLoad.Like this:
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);
}
}
prop name | description | required | default |
---|---|---|---|
snapping | [Boolean] enable snapping mode |
no | false |
smooth | [Boolean] enable smooth scrolling |
no | true |
isDownFresh | [Boolean] enable pull down to refresh |
no | false |
isUpLoad | [Boolean] enable infinite loading |
no | false |
horizonalMode | [Boolean] enable horizonal scroller mode |
no | false |
Notice:while switching horizonalMode,only upLoad is abled to work,it shows that scroll-right infinite loading also the emit event name is the same to
upLoad
.
downFresh(done)
when you pull down your container at the top border,write your logic in it usually write the ajax.Make sure the isDownFresh
prop is true
.done
should be called while you finish the ajax .upLoad(done)
when you scroll your container at the bottom border,write your logic in it usually write the ajax.Make sure the isUpLoad
prop is true
.done
should be called while you finish the ajax. However if horizonalMode
enabled, there isn’t done
available!beforeScroll
before you scroll just mean you touch the container.scroll
when you’re scrolling the container.afterScroll
after you scroll just mean you raise your finger from the container.Notice:You have to add ref
to the component scroller
and then use this.$refs
to get following methods.
closeLoad (Function)
no param,forbid infinite loading animation,usually use when your ajax finished.refreshLoad(Function)
no param,refresh infinite loading .getPosition (Function)
no param,get current position of scroller content.scrollTo (Function(Number,Boolean))
scroll to a position in scroller content,two params,the first param required Number
,the second param isn’t required ,it means whether open or close the scrolling animation.slot name | description | default | suggest |
---|---|---|---|
downfresh |
animation during pull-down refresh | svg | add className spinner |
downfreshText |
text during pull-down refresh | 下拉刷新 | |
upload |
animation during infinite loading | svg | add className spinner |
nomore |
text while foridden infinite loading | 没有更多内容了 | add className nomore |
Author: alanchenchen
GitHub: https://github.com/alanchenchen/v-scroller
#vuejs #javascript #vue-js