vue_mobile_pagination v1.0.0

vue_mobile_pagination

适配移动端分页加载器，使用方式：

# 安装使用
npm install vue_mobile_pagination


# main.js
import vuePagination from 'vue_mobile_pagination'

Vue.use(vuePagination)

基础用法

<template>
  <div class="listBox">
    <div  v-for="(item,index) in dataList" :key="index"><!-- 渲染内容 --></div>
    <vuePagination
      :dataLength="dataList.length"
      :pageSize="query.pageSize"
      @:loadData="loadmore"
      :pageNum="query.pageNum"
      ref="vuePagination"
    />
</div>
</template>
<script>
  import { getList } from './fetchData';//接口数据
  export default {
    data() {
      return {
        query:{
          pageSize:20,
          pageNum:1
        },
        dataList:[]
      }
    },
    methods: {
      getData(){//获取数据
        this.dataList = [];
        //this.$refs.load_statueController.loadReset();//此方法用于重置加载状态，若有多个请求同时使用此组件，切换请求时，需要重置当前组件状态，否则会延用上次请求的记录状态
        getList(this.query).then(v=>{
          let {list} = v.data;
          list.forEach(v=>this.dataList.push(v));
          this.$refs.vuePagination.listen();//获取完成则更新加载状态
        })
      },//getData
      loadmore() { //加载更多
        ++this.query.pageNum;
        this.getData();
      }, //loadmore
    },
    mounted() {
      this.getData();
    }
  };
</script>

配置项

持续优化中.....