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相关的问题均可以进行讨论。正如它的名字同样，有问必答，只要群主有时间，都会帮你们一块儿解决问题。