在做vue相关的H5时用的vue-scroller来进行的分页,由于是第一次接触vue这个东西当时左好多东西都是懵懂的,在踩过无数个坑之后终于现在觉得自己比以前好很多了。
1:本人用的vue-cli搭建的项目
2:用npm install vue-scroller --save下载对应的包
3:在入口文件import scroller from "vue-scroller" 接下来就是vue.use(scroller);
4:直接在组件中运用scroller插件
<template>
<scroller delegate-id="myScroller" :on-refresh="refresh" :on-infinite="loadMore"
v-ref:my_scroller>
<div v-for="(index, item) in items" @click="onItemClick(index, item)"
class="row" :class="{'grey-bg': index % 2 == 0}">
{{ item }}
</div>
</scroller>
</template>
<script>
import Scroller from 'vue-scroller'export
default {
components:
{
Scroller
},
data() {
return {
items: []
}
},
ready() {
for (let i = 1; i <= 20; i++) {
this.items.push(i + ' - keep walking, be 2 with you.')
}
this.top = 1 this.bottom = 20 setTimeout(() = >{
/* 下面2种方式都可以调用 resize 方法 */
// 1. use scroller accessor
$scroller.get('myScroller').resize()
// 2. use component ref
// this.$refs.my_scroller.resize()
})
},
methods: {
refresh() {
setTimeout(() = >{
let start = this.top - 1
for (let i = start; i > start - 10; i--) {
this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
}
this.top = this.top - 10;
/* 下面3种方式都可以调用 finishPullToRefresh 方法 */
// this.$broadcast('$finishPullToRefresh')
$scroller.get('myScroller').finishPullToRefresh()
// this.$refs.my_scroller.finishPullToRefresh()
},
1500)
},
loadMore() {
setTimeout(() = >{
let start = this.bottom + 1
for (let i = start; i < start + 10; i++) {
this.items.push(i + ' - keep walking, be 2 with you.')
}
this.bottom = this.bottom + 10;
setTimeout(() = >{
$scroller.get('myScroller').resize()
})
},
1500)
},
onItemClick(index, item) {
console.log(index)
}
}
}
</script>
接下来要说的是scroller提供的一些方法:
-
- resize :Void
- triggerPullToRefresh :Void
- Void finishPullToRefresh :Void
- scrollTo(x:Integer, y:Integer, animate:Boolean) :Void
- scrollBy(x:Integer, y:Integer, animate:Boolean) :Void
- getPosition :Object
Vue.
use(VueScroller)