https://github.com/alanchenchen/v-scroller
A vue plugin for nesting scroller ,you can use it to expand more components such as banner,date-piacker and so on.
https://github.com/alanchenchen/v-scroller
direction-scroller nesting-scroller scroller vue-plugin vue-scroller vue2
Last synced: about 1 year ago
JSON representation
A vue plugin for nesting scroller ,you can use it to expand more components such as banner,date-piacker and so on.
- Host: GitHub
- URL: https://github.com/alanchenchen/v-scroller
- Owner: alanchenchen
- License: other
- Created: 2017-10-24T07:58:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-06-06T09:39:20.000Z (about 7 years ago)
- Last Synced: 2023-12-09T15:20:25.386Z (over 2 years ago)
- Topics: direction-scroller, nesting-scroller, scroller, vue-plugin, vue-scroller, vue2
- Language: Vue
- Homepage:
- Size: 20 MB
- Stars: 35
- Watchers: 1
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# v-scroller
> A mobile Vue plugin for scroller
> pluginName: v-scroller
> version: 1.2.5
> author: Alan Chen
> github: alanchenchen@github.com
> date: 2018/08/14
[](https://github.com/996icu/996.ICU/blob/master/LICENSE)
#### This plugin is just only adapted for mobile. Please use the rem layout
> Please go to the release to see version logs.
## Why making this plugin
* There are so many vue plugins on github,but i haven't found a suitable mini vue plugin for scroller.The best scroller plugin i have seen is the 'better-scroller',however it's not for vue especially.I decide to make a mini vue scroller plugin for my own company programs also for people who wanna use scroller simply.
## What you can do with the plugin
* You can use it to make a scroller container includes pulling-refresh,infinite-loading and horizonal scroller also supporting nesting different direction scroller.
 
[中文文档](./ChineaseREADME.md)
## How to use
* NPM install the v-scroller plugin
```node
yarn add v-scroller or npm install v-scroller --save
```
#### 1.vue spa
* import the plugin and use
``` javascript
import scroller from 'v-scroller'
import 'v-scroller/dist/v-scroller.css'
Vue.use(scroller)
```
#### 2.script html
* directly write the script,in deed you have to `insert the vue.js` script firstly
``` html
```
* use the component scroller directly in your vue spa file or the Vue instance
``` javascript
```
## DEMO Codes
``` javascript
there is nomore data~
- number {{item}} item
x:{{left}},y:{{top}}
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();
}
}
}
```
> 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：
``` javascript
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);
}
}
```
## Options
#### props
| 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`.
#### emit events
* `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.
#### plugin methods
> 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.
#### slots
| 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 |