listen-list-view

安装

npm install listen-list-view --save

使用方法

// XXX.vue
import ListenListView from 'listen-list-view';

export default {
  conponents: {
    ListenListView
  }
}

API

传参

参数名	是否必传	说明	类型	默认值
total	true	总条数	Number	0
data	true	每次请求返回的数据	Array	[]
pageSize	false	实际每次请求数据长度	Number	10
current	false	默认第几页（分页器上显示的值）	Number	1
pageTime	false	分页器一页数据长度 除以 实际每次请求数据长度	Number	5
noDataText	false	无数据时提示语	String	'暂无数据'

方法

事件名	说明	返回值
on-change	传递分页请求	第几页

slot

  <template slot-scope="{ data }">
    <div v-for="item in data" style="height:50px;">{{ item }}</div>
  </template>

demo

需求：分页加载

• 一次加载10条，下滑加载更多，加载到50条时展示翻页信息（数量不足时不展示翻页按钮）
• 翻页后，仍保留上述加载规则

<template>
  <listen-list-view 
    :total="total" 
    :page-size="pageSize" 
    :page-time="pageTime"
    :data="data"
    :no-data-text="noDataText"
    @on-change="changePage">
    <template slot-scope="{ data }">
      <div v-for="item in data" style="height:50px;">{{ item }}</div>
    </template>
  </listen-list-view>
</template>

<script>
  import ListenListView from 'listen-list-view'

  export default {
    components: {
      ListenListView
    },
    data() {
      return {
        data: [],
        total: 0,
        pageSize: 10, 
        pageTime: 5, 
        noDataText: '组员发布的活动、研修资源、研修圈动态等内容会展示在此，赶紧去成为组内第一人吧~'
      }
    },
    created() {
      this.changePage(1)
    },
    methods: {
      changePage(pageNo) {
        this.$store.dispatch('proxyAction', {
          'name': '接口名',
          'queries': {
            pageIndex: pageNo
          }
        }).then((res) => {

          if (res && res.code === 200) {
            let data = res.data.data;
            this.total = data.total;
            this.data = data.rows;
          } else {
            this.$Message.error({
              content: res.message
            })
          }
        });
      }
    }
  }
</script>