vue-easyrefresh

vue-easyrefresh

正如名字一样，EasyRefresh很容易就能在基于Vue的Web应用上实现下拉刷新以及上拉加载操作，支持主流的PC和移动浏览器。它的功能灵感来源于与Android的SmartRefreshLayout，同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer，但是它并没有局限性，你可以很轻松的自定义，做到你想要的任何样子。使用Html强大的动画，甚至随便一个简单的控件也可以完成。EasyRefresh的目标是打造一个强大，稳定，成熟的下拉刷新框架

特点

支持越界回弹效果
支持自定义并且已经集成了很多炫酷的 Header 和 Footer
支持下拉刷新、上拉加载(可自动)
支持触发刷新和加载
支持 Header 和 Footer 列表嵌入以及视图浮动两种形式
支持列表事件监听，制作任何样子的 Header 和 Footer，并且能够放在任何位置

演示

https://xuelongqy.github.io/vue-easyrefresh/#/home/sample

安装vue-easyrefresh

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

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

引入 EasyreFresh

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

使用 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"/> -->

相关插件

vue-scroller

Vue Scroller是Vonic UI 的基础组件。为了平滑滚动，请拉动以刷新和无限加载

vue-scroller

演示

Android智能下拉刷新框架-SmartRefreshLayout

SmartRefreshLayout以打造一个强大，稳定，成熟的下拉刷新框架为目标，并集成各种的炫酷、多样、实用、美观的Header和Footer。 正如名字所说，SmartRefreshLayout是一个“聪明”或者“智能”的下拉刷新布局，由于它的“智能”，它不只是支持所有的View，还支持多层嵌套的视图结构。 它继承自ViewGroup 而不是FrameLayout或LinearLayout，提高了性能。 也吸取了现在流行的各种刷新布局的优点，包括谷歌官方的 SwipeRefreshLayout， 其他第三方的 Ultra-Pull-To-Refresh、TwinklingRefreshLayout 。 还集成了各种炫酷的 Header 和 Footer

SmartRefreshLayout