1.0.24 • Published 7 years ago
vue-super-scroller v1.0.24
vue-super-scroller
Table of contents
Installation
npm install vue-super-scroller --save
Global Install
Install all the components:
import Vue from 'vue'
import VueSuperScroller from 'vue-super-scroller'
Vue.use(VueSuperScroller)
Usage
:load-disabled="!hasNext"
:on-refresh="refresh"
:on-load='loadMore'
Example
<template>
<div id="app">
<vue-scroller :load-disabled="!hasNext" :on-refresh="refresh" :on-load='loadMore'>
<li v-for="(item,index) in lists">{{item}}</li>
</vue-scroller>
</div>
</template>
<script>
export default {
name: 'app',
components: {},
data () {
return {
lists: [1, 2, 3],
hasNext: true
}
},
mounted () {
this.$nextTick(function () {
this.loadMore()
})
},
methods: {
getRandArr (num = 20) {
let arr = []
for (let i = num - 1; i >= 0; i--) {
arr.push(Math.round(Math.random() * 100))
}
return arr
},
refresh (call) {
setTimeout(() => {
this.lists = [1, 2, 3]
call(true)
}, 1000)
},
loadMore () {
setTimeout(() => {
this.lists = this.lists.concat(this.getRandArr(20))
if (this.lists.length > 50) {
this.hasNext = false
}
}, 1000)
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
li {
height: 150px;
text-align: center;
line-height: 150px;
font-size: 30px;
}
li:nth-child(odd) {
background-color: #eee
}
</style>
License
1.0.24
7 years ago
1.0.23
7 years ago
1.0.22
7 years ago
1.0.21
7 years ago
1.0.20
7 years ago
1.0.19
7 years ago
1.0.18
7 years ago
1.0.16
7 years ago
1.0.15
7 years ago
1.0.13
7 years ago
1.0.12
7 years ago
1.0.11
7 years ago
1.0.10
7 years ago
1.0.9
7 years ago
1.0.8
7 years ago
1.0.7
7 years ago
1.0.6
7 years ago
1.0.5
7 years ago
1.0.4
7 years ago
1.0.3
7 years ago
1.0.2
7 years ago
1.0.1
7 years ago
1.0.0
7 years ago