一款易用、高可定製的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>
複製代碼

更多案例參考：vo-pages/examples

API

參數	說明	類型	默認值
data	數據列表	array	必填
click	是否可響應用戶點擊事件	boolean	true
loadedAll	是否已加載全部數據	boolean	false
pullUpHandle	是否開啓上拉事件，若是不須要上拉事件，必須設置爲false	object | boolean	true
pullDownHandle	是否開啓下拉事件，若是不須要下拉事件，必須設置爲false	object | boolean	{threshold: 50,stop: 30}
pullDownToLoadmore	是否下拉加載更多	boolean	false
noDataHint	初始化/無數據時是否提示	boolean	true
config	自定義設置	object	{}

點擊pullUpHandle和pullDownHandle查看詳細介紹

config配置項

管道符後面的值是pullDownToLoadmore爲ture時(下拉加載更多)的默認值

參數	說明	類型	默認值
pullDownMsgDelay	下拉提示語展現時長(ms)	number	800
loading			加載中……
refresh			刷新中…… |加載中……
refreshed			刷新成功 | 已加載
loadedAllMsg			已加載所有
pullUpMsg			上拉加載更多
pullDownMsg			下拉刷新 | 下拉加載更多
touchLeaveMsg			釋放當即刷新 | 釋放加載更多
noData			暫無數據
pullDownStyle	下拉提示樣式		{}
pullUpStyle	上拉提示樣式		{}
endLineStyle	底線樣式		{}

Events

• pullingUp：上拉超過pullUpHandle的threshold觸發
• pullingDown： 下拉超過pullDownHandle的threshold觸發

Slot

只有一個默認插槽，用來展現用戶數據

注意

• 數據不足一屏時且有下一頁時會自動請求下一頁數據

TODO

• 下拉圖標（掘金下拉效果）
• css自動加載

---

若是各位大佬使用中遇到bug或不爽的點，還但願能夠給提issue，您的反饋使我進步，很是感謝。

再次奉上項目源碼 以爲還不錯的話，點個贊再走唄👍