<template> <div class="page page-scroller"> <scroller class="scroller" style="padding-top: 46px" :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: 1, // 当前页码 items: [], noData: false } }, mounted () { this.findList() }, methods: { // 查询列表数据 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 (this.currentPageNo >= 4) { 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>
vue-scroller使用
猜你喜欢
转载自www.cnblogs.com/wpp281154/p/10724657.html
今日推荐
周排行