vue-easyrefresh簡介
正如名字一樣，EasyRefresh很容易就能在基于Vue的Web應(yīng)用上實(shí)現(xiàn)下拉刷新以及上拉加載操作巷帝，支持主流的PC和移動(dòng)瀏覽器忌卤。它的功能靈感來源于與Android的SmartRefreshLayout，同樣也吸取了很多三方庫的優(yōu)點(diǎn)锅睛。EasyRefresh中集成了多種風(fēng)格的Header和Footer埠巨，但是它并沒有局限性历谍，你可以很輕松的自定義现拒，做到你想要的任何樣子。使用Html強(qiáng)大的動(dòng)畫望侈，甚至隨便一個(gè)簡單的控件也可以完成印蔬。EasyRefresh的目標(biāo)是打造一個(gè)強(qiáng)大，穩(wěn)定脱衙，成熟的下拉刷新框架侥猬。
App版本移步：flutter_easyrefresh
特點(diǎn)功能:
- 支持越界回彈效果
- 支持自定義并且已經(jīng)集成了很多炫酷的 Header 和 Footer
- 支持下拉刷新例驹、上拉加載(可自動(dòng))
- 支持觸發(fā)刷新和加載
- 支持 Header 和 Footer 列表嵌入以及視圖浮動(dòng)兩種形式
- 支持列表事件監(jiān)聽，制作任何樣子的 Header 和 Footer退唠，并且能夠放在任何位置
傳送門
Demo
https://xuelongqy.github.io/vue-easyrefresh
image
簡單用例
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">
<!-- 列表內(nèi)容 -->
</EasyRefresh>
<!-- 更多使用方法請(qǐng)參考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
進(jìn)群須知
這個(gè)群不僅僅是解決EasyreFresh的問題，任何Vue.js相關(guān)的問題都可以進(jìn)行討論瞧预。正如它的名字一樣屎债，有問必答，只要群主有時(shí)間垢油，都會(huì)幫大家一起解決問題盆驹。
