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相關的問題都可以進行討論。正如它的名字一樣，有問必答，只要群主有時間，都會幫大家一起解決問題。