Vue上拉加載下拉刷新---vue-easyrefresh

vue-easyrefresh簡介

正如名字同樣，EasyRefresh很容易就能在基於Vue的Web應用上實現下拉刷新以及上拉加載操做，支持主流的PC和移動瀏覽器。它的功能靈感來源於與Android的SmartRefreshLayout，一樣也吸收了不少三方庫的優勢。EasyRefresh中集成了多種風格的Header和Footer，可是它並無侷限性，你能夠很輕鬆的自定義，作到你想要的任何樣子。使用Html強大的動畫，甚至隨便一個簡單的控件也能夠完成。EasyRefresh的目標是打造一個強大，穩定，成熟的下拉刷新框架。

GitHub：vue-easyrefresh
App版本移步：flutter_easyrefresh

特色功能:

• 支持越界回彈效果
• 支持自定義而且已經集成了不少炫酷的 Header 和 Footer
• 支持下拉刷新、上拉加載(可自動)
• 支持觸發刷新和加載
• 支持 Header 和 Footer 列表嵌入以及視圖浮動兩種形式
• 支持列表事件監聽，製做任何樣子的 Header 和 Footer，而且可以放在任何位置

傳送門

• 屬性文檔
• 常見問題
• 更新日誌
• 自定義Header和Footer

Demo

https://xuelongqy.github.io/vue-easyrefresh

簡單用例

1.安裝vue-easyrefresh

// 使用命令安裝
npm install vue-easyrefresh -S
或者
yarn add vue-easyrefresh

// 使用package.json
"dependencies": {
  "vue-easyrefresh": "version",
  ....
}

2.引入 EasyreFresh

import Vue from 'vue'
import EasyRefresh from 'vue-easyrefresh'
Vue.use(EasyRefresh)

3.使用 EasyreFresh

<EasyRefresh
    :userSelect="false"
    :onRefresh="onRefresh"
    :loadMore="loadMore">
    <!-- 列表內容 -->
</EasyRefresh>
<!-- 更多使用方法請參考Example -->

使用指定的 Header 和 Footer

<EasyRefresh
        :userSelect="false"
        :onRefresh="onRefresh"
        :loadMore="loadMore">
    <template v-slot:header>
        <MaterialHeader/>
    </template>
    <StripeList :count="itemCount"/>
    <template v-slot:footer>
        <MaterialFooter/>
    </template>
</EasyRefresh>
<!-- 注：<template v-slot:header>爲vue2.6後的語法，仍然可使用<MaterialHeader slot="header"/> -->

QQ討論羣 - 623262733

進羣須知

這個羣不單單是解決EasyreFresh的問題，任何Vue.js相關的問題均可以進行討論。正如它的名字同樣，有問必答，只要羣主有時間，都會幫你們一塊兒解決問題。