vue-scroller使用
<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组件的容器,使用绝对定位设置好高度