严格的来说,这是我第一个完全投入的开源项目,它的出现是为了统一移动H5中的下拉刷新,想通过一套框架,多主题拓展方式,适应于任意需求下的任意下拉刷新场景。

另外,这个项目作为独立项目存在,希望能有更多的人参与进来!

【minirefresh】优雅的H5下拉刷新。零依赖,高性能,多主题,易拓展。

特点

  • 零依赖(原生JS实现,不依赖于任何库)

  • 多平台支持。一套代码,多端运行,支持Android,iOS,主流浏览器

  • 丰富的主题,官方提供多种主题(包括默认,applet-仿小程序,drawer3d-3d抽屉效果,taobao-仿淘宝等)

  • 高性能。动画采用css3+硬件加速,在主流手机上流畅运行

  • 良好的兼容性。支持和各种Scroll的嵌套(包括mui-scroll,IScroll,Swipe等),支持Vue环境下的使用

  • 易拓展,三层架构,专门抽取UI层面,方便实现各种的主题,实现一套主题非常方便,而且几乎可以实现任何的效果

  • 优雅的API和源码,API设计科学,简单,源码严谨,所有源码通过ESlint检测

  • 完善的文档与示例,提供完善的showcase,以及文档

源码

https://github.com/minirefresh/minirefresh

https://www.npmjs.com/package/minirefresh

官网与文档

http://www.minirefresh.com

https://minirefresh.github.io/

效果

基础示例

1. 【基础新闻列表】最基本的下拉刷新使用

2. 【多列表单容器】每次切换菜单时刷新容器

3. 【多列表多容器】多个列表都有一个Minirefresh对象

4. 【Vue支持】支持Vue下的使用

嵌套示例

1. 【Mui-Slider】内部嵌套图片轮播

2. 【Mui-Scroll】嵌套在Mui-Scroll中

3. 【Swipe】嵌套在Swipe中

主题示例

1. 【applet】仿微信小程序主题

2. 【taobao】仿淘宝刷新主题

3. 【drawer3d】3D抽屉效果主题

4. 【drawer-slider】滑动抽屉效果主题

showcase

可以直接在线体验效果

https://minirefresh.github.io/minirefresh/examples/

快速开始

引入

<link rel="stylesheet" href="xxx/minirefresh.css" />
<script type="text/javascript" src="xxx/minirefresh.js"></script>

或require

var MiniRefreshTools = require('xxx/minirefresh.js');

或import

import { MiniRefreshTools } from 'xxx/minirefresh.js';

页面布局

<!-- minirefresh开头的class请勿修改 -->
<div id="minirefresh" class="minirefresh-wrap">
<div class="minirefresh-scroll">
</div>
</div>

初始化

// 引入任何一个主题后,都会有一个 MiniRefresh 全局变量
var miniRefresh = new MiniRefresh({
container: '#minirefresh',
down: {
callback: function() {
// 下拉事件
}
},
up: { callback: function() {
// 上拉事件
}
}
});

结束刷新

// 结束下拉刷新
miniRefresh.endDownLoading();
// 结束上拉加载
// 参数为true代表没有更多数据,否则接下来可以继续加载
miniRefresh.endUpLoading(true);

更多

更多的使用请参考官方文档

贡献

minirefresh需要你!

来为项目添砖加瓦,新的Idea,新的主题,重大Bug发现,新的设计资源(如图标,官网设计等)

都可以通过IssuePR的方式提交!

贡献被采纳后会加入贡献者名单,如果有杰出贡献(如持续贡献),可以加入Manager小组,共同开发维护MiniRefresh

有共同参与项目意愿的,可以申请成为Member,成为Minirefresh真正的主人!

更多参考:https://minirefresh.github.io/minirefresh-doc/site/contribute/howtocontributor.html

讨论

注意,申请加入群时请添加验证信息,例如:minirefresh使用遇到问题等等

最后关于灵感与参考

核心架构是参考的我自己以前的项目 https://github.com/dailc/pulltorefresh-h5-iscroll,只不过把依赖IScroll换成了原生JS与CSS3实现,并且完全的重构与优化

做这个项目的灵感与原动力是受 https://github.com/mescroll/mescroll 启发,但是由于那个项目里的代码不符合我的个人风格,一些主题拓展也没有达到我的要求,因此我自己重新写了一个项目而不是基于mescroll拓展

还有就是写这个项目也是对自己的一种锻炼,里面包含了

  • JS与CSS3的熟练运用,并进行合理架构
  • ESlint严格的代码检测
  • Gulp 自动构建
  • Karma+Mocha单元测试(待完善)
  • Circleci,Codecov,Sauce等自动集成与测试网址,
  • Gitbook构建API与教程文档
  • Hexo构建官方网站(待完善)
  • 域名备案,CDN加速等(待完善)
  • Npm发布与Github项目团队

当然了,迫于一些原因,没有用全新的ES6或TS写,而是用的ES5严格模式。

另外,这个项目是托管在Githubminirefresh组织上的,希望有更多的人能参与,成为组织的一员,共同维护,毕竟在不断的分享交流中才能进步更快...

优雅的H5下拉刷新【minirefresh】的更多相关文章

  1. H5 下拉刷新、加载更多

    H5 下拉刷新.加载更多 demos const autoLoadMore = (url = ``) => { // todo ... } refs xgqfrms 2012-2020 www. ...

  2. 前端提升生产力系列三(vant3 vue3 移动端H5下拉刷新,上拉加载组件的封装)

    | 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过v ...

  3. H5下拉刷新特效demo,动画流畅

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. H5下拉刷新和上拉加载实现原理浅析

    前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的 ...

  5. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  6. android新闻项目、饮食助手、下拉刷新、自定义View进度条、ReactNative阅读器等源码

    Android精选源码 Android仿照36Kr官方新闻项目课程源码 一个优雅美观的下拉刷新布局,众多样式可选 安卓版本的VegaScroll滚动布局 android物流详情的弹框 健身饮食记录助手 ...

  7. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  8. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  9. apicloud如何实现优雅的下拉刷新与加载更多

    apicloud中提供下拉刷新监听事件api,也提供滚动到底部事件的监听,能够实现下拉刷新和滚动到底部加载更多功能,但是我们真的就满足实现功能了吗?将两个代码拼凑起来运行看看发现了什么?是的,在滚动到 ...

随机推荐

  1. hashcode-equals方法

    package com.charles.collection; import java.util.HashSet; import java.util.Set; public class Point { ...

  2. 关于线程和junit注入失败的问题

    问题: 在使用spring的时候,通常会使用注释@Autowired或@Resource注入java Bean; 但是在碰到线程类和测试类的时候就不支持注入方式了. 定义: 线程类:继承thread或 ...

  3. HDFS笔记——技术点汇总

    目录 · 概况 · 原理 · HDFS 架构 · 块 · NameNode · SecondaryNameNode · fsimage与edits合并 · DataNode · 数据读写 · 容错机制 ...

  4. css 的包含块 、负外边距,字体,文本行高

    一.包含块 目的:确定元素的位置和相对大小(%) 1.正常文档流元素和浮动元素 ---- 父元素的 content-box 2.绝对定位元素 ---- 父元素的 padding-box 3.固定定位元 ...

  5. readelf相关命令

    -a --all 显示全部信息,等价于 -h -l -S -s -r -d -V -A -I. -h --file-header 显示elf文件开始的文件头信息. -l --program-heade ...

  6. 【整理】01. Fiddler 杂记

    抓手机包步骤: Tools -- Fiddler Options -- Connections (默认)Fiddler listens on port:8888 (勾选)Allow remote co ...

  7. VM虚拟机中安装Linux操作系统

    本文操作步骤,笔者已实验成功 (前提:正确安装VM并激活) 1,点击新建虚拟机,在页面上选择"自定义",点击下一步 2,进入选择虚拟机硬件兼容页面,这里一般不用操作,直接点击下一步 ...

  8. [补档][Tyvj 1728]普通平衡树

    [Tyvj 1728]普通平衡树 题目 您需要写一种数据结构(可参考题目标题),来维护一些数,其中需要提供以下操作: 1. 插入x数 2. 删除x数(若有多个相同的数,因只删除一个) 3. 查询x数的 ...

  9. POJ 3259 Wormholes Bellman_ford负权回路

    Description While exploring his many farms, Farmer John has discovered a number of amazing wormholes ...

  10. 安徽省2016“京胜杯”程序设计大赛_H_单身晚会

    单身晚会 Time Limit: 1000 MS Memory Limit: 65536 KB Total Submissions: 53 Accepted: 16 Description ​ZJ和Z ...