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

vue-easyrefresh简介

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

App版本移步:flutter_easyrefresh

特点功能:

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

传送门

  • 属性文档
  • 常见问题
  • 更新日志
  • 自定义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


    


使用指定的 Header 和 Footer


    
    
    


QQ讨论群 - 623262733

进群须知

这个群不仅仅是解决EasyreFresh的问题,任何Vue.js相关的问题都可以进行讨论。正如它的名字一样,有问必答,只要群主有时间,都会帮大家一起解决问题。

你可能感兴趣的:(Vue上拉加载下拉刷新---vue-easyrefresh)