安装

npm install yanxiu-scroll-list --save

使用方法

main.js

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

Vue.use(YanxiuScrollList);

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

list.vue

注意事项：

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

<template>
  <div class="text-list-wrap" style="position:relative;height:500px">
    <yanxiu-scroll-list
        :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-scroll-list>
  </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

传参

| 参数名 | 是否必传 | 默认值 | | ------ | ------ | ------ | | page-size | 否 | 10 | | data | 否 | [] |

注意：data.length < page-size 时，无加载更多功能。

方法

| 事件名 | 说明 | 返回值 | | ------ | ------ | ------ | | pulling-down | 下拉刷新的回调 | | | pulling-up | 上拉加载更多的回调 | | | click-item | 点击列表项的回调 | 列表项数据 |

slot

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