<template>
<div class="page page-scroller">
<scroller
class="scroller"
style="padding-top: 0"
:on-refresh="refresh"
:on-infinite="infinite"
ref="my_scroller"
>
<div v-for="(item, index) in items" class="row" :class="{'grey-bg': index % 2 == 0}" :key="index">
{{ item.name }}{{index}}
</div>
</scroller>
</div>
</template> <script>
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
name: 'PageScroller',
data () {
return {
pageSize: 5, // 分页大小
currentPageNo: 0, // 当前页码
items: [],
isEmpty: true,
noData: false
}
},
mounted () {},
methods: {
// 查询方法
searching () {
this.pageNo = 1
this.$refs.my_scroller.finishInfinite(false) // 启用上拉加载更多
this.noData = true
this.isEmpty = false
this.$refs.my_scroller.scrollTo(0, 0, false) // 列表滚动到顶部
this.findList()
},
// 查询列表数据
findList (done) {
let url = '/app/approveList'
this.ABILITY.request.mock(url).then(res => {
console.log(res)
let data = res.data
if (this.currentPageNo === 1) {
this.items = data
done && done()
this.$refs.my_scroller.finishPullToRefresh()
this.$refs.my_scroller.finishInfinite(false) // 启用上拉加载更多
this.noData = false
} else {
this.items = this.items.concat(data)
done && done()
if (data.length === 0) {
this.noData = true
} else {
this.$refs.my_scroller.finishInfinite(false)
}
}
})
}, // 下拉刷新
refresh (done) {
let self = this
self.currentPageNo = 1
setTimeout(() => {
self.findList(done)
}, 1500)
}, // 初始化
infinite (done) {
let self = this
if (self.noData) {
self.$refs.my_scroller.finishInfinite(true) // 禁止上拉加载更多
return false
}
self.currentPageNo++
setTimeout(() => {
self.findList(done)
}, 1500)
}
}
}
</script> <style lang="less">
@import url("./Scroller.less");
</style>
scroller组件的容器，使用绝对定位设置好高度