一款易用、高可定制的vue翻页组件

在线体验：pages.cixi518.com

使用

npm i vo-pages --save
vo-pages组件父元素必须设置固定高度并填写属性overflow: hidden;如：

height: 100vh;
overflow: hidden;

全局引入

// mian.js
import VoPages from "vo-pages";
import "vo-pages/lib/vo-pages.css";
Vue.component('VoPages', VoPages)

局部引入

import VoPages from 'vo-pages';
import "vo-pages/lib/vo-pages.css";
components: {
  VoPages
}

常规使用

<vo-pages :data="list" @pullingUp="pullingUp" @pullingDown="pullingDown" :loadedAll="loadedAll">
  <ul class="article-list">
    <li class="article" v-for="article in list" :key="article.id">
      <slot></slot>
      <div class="left">
        <img :src="article.image_uri" alt="thumb" />
      </div>
      <div class="right">
        <p>{{ article.title }}</p>
        <p>{{ article.author }}</p>
      </div>
    </li>
  </ul>
</vo-pages>

API

config配置项

管道符后面的值是pullDownToLoadmore为ture时(下拉加载更多)的默认值

Events

pullingUp：上拉超过pullUpHandle的threshold触发
pullingDown：下拉超过pullDownHandle的threshold触发

Slot

只有一个默认插槽，用来展示用户数据

注意

数据不足一屏时且有下一页时会自动请求下一页数据

原文地址：https://juejin.im/post/5d81da4551882556ba55e50e