NafmPageList.vue

<template>
  <div v-if="isEmpty" class="list-empty">暂无数据</div>
  <section v-else class="page_list">
    <van-list
      v-model="Status.loading"
      :finished="Status.finished"
      :error.sync="Status.error"
      error-text="加载失败，点击重新加载"
      :immediate-check="false"
      :offset="10"
      finished-text="已经到底了"
      @load="fetchData"
    >
      <slot v-bind="{ datas }"></slot>
    </van-list>
  </section>
</template>

<script>
export default {
  name: 'NafmPageList',
  props: {
    refresh: {
      type: Boolean,
      default: false
    },
    emptyType: {
      type: [String, Number],
      default: 6
    },
    pageSize: {
      type: [String, Number],
      default: 10
    },
    onLoad: {
      type: Function,
      default: (param) => Promise.resolve({ data: [] })
    }
  },
  model: {
    prop: ['refresh']
  },
  data () {
    return {
      Status: {
        loading: true,
        finished: false,
        error: false
      },
      pageNo: 1,
      isEmpty: false,
      datas: []
    }
  },
  watch: {
    refresh (val) {
      val && this.resetLoad()
    }
  },
  methods: {
    fetchData () {
      this.isEmpty = false
      Object.assign(this.Status, { loading: true, error: false, finished: false })
      const { pageNo, pageSize, datas } = this
      const params = { pageNo, pageSize }
      this.onLoad(params).then(res => {
        const { error, Status, statusText, data } = res || {}
        if (error || (status != 0 && status != undefined)) {
          Objecta.assign(this.Status, { error: false, loading: false })
          this.$emit('input', false)
          return
        }
        // 第一页数据请求结果为空时，表示暂无数据
        if (pageNo == 1 && data.length == 0) {
          // 页面展示无数据样式
          Object.assign(this, { isEmpty: true, datas: [] })
          Object.assign(this.Status, { loading: false })
          this.$emit('input', false)
          return
        }

        // 小于每次分页数, 表示加载完成
        if (data.length < pageSize) {
          Object.assign(this.Status, { finished: true })
        }
        // 第一页直接赋值，后续下拉刷新会重置pageNo。
        const newDatas = pageNo == 1 ? data : datas.concat(data)
        const newPageNo = pageNo + 1
        Object.assign(this, { pageNo: newPageNo, datas: newDatas })
        Object.assign(this.Status, { loading: false })
        this.$emit('input', false)
      }).catch(e => {
        Object.assign(this.Status, { error: true, loading: false })
        this.$emit('input', false)
      })
    },

    resetLoad () {
      Object.assign(this, { pageNo: 1 })
      this.fetchData()
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>