安装

npm install yanxiu-list-scroll --save

使用方法

main.js

// main.js
import Vue from 'vue';
import List from './list.vue';
import YanxiuListScroll from 'yanxiu-list-scroll';

Vue.use(YanxiuListScroll);

new Vue({
  el: '#root',
  render: h => h(List)
})

list.vue

注意事项：

<yanxiu-list-scroll></yanxiu-list-scroll> 的元素样式为 position: absolute; 注意它的父级元素 position 的属性值。

<template>
  <div class="text-list-wrap" style="position:relative;height:500px">
    <yanxiu-list-scroll
        :page-size="requestObj.pageSize"
        ref="listScroll"
        :data="courses"
        @pulling-down="onPullingDown"
        @pulling-up="onPullingUp"
        @click-item="toDetailPage">
        <template slot-scope="{ item }">
            <div class="detail">
              {{ item.id }}
            </div>
        </template>
    </yanxiu-list-scroll>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        requestObj: {
          page: 1,
          pageSize: 10
        },
        courses: [
          {'id': 1},
          {'id': 2},
          {id:12},{id:13},{id:14},{id:15}
        ]
      }
    },
    methods: {
      getListData() {
        setTimeout(()=>{
          this.endPulling();
        }, 20);
      },
      toDetailPage(data) {
        console.log(data)
      },
      onPullingDown() {
        // 下拉刷新
        this.requestObj.page = 1;
        this.getListData();
      },
      onPullingUp() {
        // 更新数据
        this.requestObj.page++;
        this.getListData();
      },
      endPulling() {
        this.$refs.listScroll.endPulling()
      }
    }
  }
</script>

API

传参

| 参数名 | 说明| 是否必传 | 类型 | 默认值 | | ------ | ------| ------ | ------ | ------ | | data | 列表数据 | 否 | Array | [] | | isPullUpLoad | 是否允许加载更多 | 否 | Boolean | true | | isPullDownRefresh | 是否允许下拉刷新 | 否 | Boolean | true | | page-size | 每次请求数据长度 | 否 | [String, Number] | 10 | | noDataTxt | 列表为空时展示文字 | 否 | String | "暂无数据" | | refreshTxt | 下拉刷新完成时展示文字 | 否 | String | "更新成功" | | moreTxt | 上拉加载更多时展示文字 | 否 | String | "加载更多" | | noMoreTxt | 上拉加载更多未获取更多数据时展示文字 | 否 | String | "没有更多数据了" | | isListenScroll | 是否监听滚动获取滚动方向 | 否 | Boolean | false |

方法

| 事件名 | 说明 | 返回值 | | ------ | ------ | ------ | | pulling-down | 下拉刷新的回调 | | | pulling-up | 上拉加载更多的回调 | | | click-item | 点击列表项的回调 | 列表项数据 | | on-scroll-direction | 获取滚动方向的回掉 | number: -1 表示从上往下滑，1 表示从下往上滑，0 表示没有滑动 |

slot

<template slot-scope="{ item }">
  // 此处添加 列表项内容, item 为列表项数据
</template>