vue-scroller使用

<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>