nat-vue-list v1.0.0

vue-list

滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项

install

NPM

npm install nat-vue-list

用法

<template lang="html">
     <list @load="onLoad" v-model="loading" :finished="finished" loading-text="加载中..." finished-text="没有更多了" :error.sync="error" error-text="加载失败,点击重新加载">
         <ul>
             <li v-for="item in list">{{item}}</li>
         </ul>
     </list>
</template>

<script>
  import list from 'nat-vue-list';
  import axois from 'axios';
 export default {
     name: 'ProjectFeatures',
     data() {
         return {
             list: [],
             loading: false,
             finished: false,
             error: false
         };
     },
     components: {
         list,
     },
     mounted () {
     },
     methods: {
       
         getLists () {
             axois.get('http://172.16.0.45:7300/mock/5c88c2241d2cb328eddca711/components/api/list').then(r => {
                 this.list.push(...r.data.data);
                 if (this.list.length >= 90) {
                     this.finished = true;
                 }
             }).catch(e => {
                 this.error = true;
             }).finally(() => {
                 this.loading = false;
             });
         },
         onLoad() {
             this.getLists();
         }
     }
 };
 </script>

API

props

event

方法

通过 ref 可以获取到 list 实例并调用实例方法 名称 | 参数 | 返回值 | 介绍 ---|---|---|--- check | - | - |检查当前的滚动位置，若已滚动至底部，则会触发 load 事件

启动

npm run dev

编译

npm run build-lib