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

来源：oschina

链接：https://my.oschina.net/u/4336279/blog/3570060

标签

Vue.js

page scroller

scrollto