Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dafrok/vue-iscroll-view
IScroll-view component for Vue 2.x
https://github.com/dafrok/vue-iscroll-view
iscroll vue vue-iscroll
Last synced: 2 days ago
JSON representation
IScroll-view component for Vue 2.x
- Host: GitHub
- URL: https://github.com/dafrok/vue-iscroll-view
- Owner: Dafrok
- License: mit
- Created: 2016-11-16T08:17:09.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2021-05-10T17:52:17.000Z (over 3 years ago)
- Last Synced: 2024-11-09T14:50:34.281Z (11 days ago)
- Topics: iscroll, vue, vue-iscroll
- Language: Vue
- Homepage: https://dafrok.github.io/vue-iscroll-view
- Size: 700 KB
- Stars: 148
- Watchers: 6
- Forks: 26
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/vue-iscroll-view)
# vue-iscroll-view
[IScroll](https://github.com/cubiq/iscroll) component for Vue 2.x
## Demo
> https://dafrok.github.io/vue-iscroll-view/
## Built with vue-iscroll-view
- [vue-flexible-app](https://github.com/momopig/vue-flexible-app)
## Install
```bash
$ npm i vue-iscroll-view
$ npm i iscroll
```
## Get Start
```javascript
import IScrollView from 'vue-iscroll-view'
/* Using these kinds of IScroll class for different cases. */
import IScroll from 'iscroll'
// import IScroll from 'iscroll/build/iscroll-infinite.js
// import IScroll from 'iscroll/build/iscroll-probe.js
// import IScroll from 'iscroll/build/iscroll-view.js
// import IScroll from 'iscroll/build/iscroll-zoom.js
// import IScroll from 'iscroll/build/iscroll-lite.js
Vue.use(IScrollView, IScroll)
```
```vue
Your contents
.scroll-view {
/* -- Attention: This line is extremely important in chrome 55+! -- */
touch-action: none;
/* -- Attention-- */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
```
## Usage
### Set IScroll options
```vue
Your contents
```
### Listen IScroll events
```vue
Your contents
export default {
methods: {
log (iscroll) {
console.log(iscroll)
}
}
}
```
### Call IScroll instance functions
```vue
Your contents
Scroll To Top
export default {
methods: {
scrollToTop () {
const iscroll = this.$refs.iscroll
iscroll.scrollTo(0, 0, 100)
iscroll.refresh()
}
}
}
```
### Custom events
- pullUp
- pullDown
```vue
Your contents
export default {
methods: {
refresh (iscroll) {
// Refresh current data
},
load (iscroll) {
// Load new data
}
}
}
```
### The Scroller
Each iscroll instance contains a wrapper and a scroller, the `` element is simply a reference the wrapper. If you need to take control of the scroller, the following case may help you.
```vue
Your contents
export default {
mounted () {
/* Get the reference of the scroller */
const $scroller = this.$refs.iscroll.$refs.scroller
console.log($scroller)
}
}
.scroller {
background: blue
}
```