An easy to use, highly customizable vue flip assembly

An easy to use, highly customizable vue flip assembly

Online experience: pages.cixi518.com

use

npm i vo-pages --save
VO -pages parent element assembly must set a fixed height and fill attribute overflow: hidden; such as:

height: 100vh;
overflow: hidden;

Global introduction

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

Introduced locally

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

Routine use

<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 configuration items

The latter value is the pipe character pullDownToLoadmoreis ture (pull-down load more) defaults

Events

• pullingUp: pull over on pullUpHandlethe thresholdtrigger
• pullingDown: drop-down than pullDownHandlethe thresholdtrigger

Slot

Only a default slot, used to display user data

note

• And automatically requests the next page of data when there is insufficient data on one screen Next

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