A plugin of pull-to-refresh in mobile pages written in vanilla js
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
js
vendors
LICENSE
README.md
index.html

README.md

PullRefresh

原生JS实现移动端的下拉刷新操作。不多说,直接上图。

演示

移动端下拉刷新操作

大图杀猫

动图演示

项目文件

├─css
│ └─layout.css          样式文件
├─js
│ └─pullrefresh.js      JS文件
├─vendors
│ └─demo.gif            演示图
├─index.html            演示页面
├─LICENSE               协议
└─README.md             项目说明

说明

  • 为何要做这样的一个页面?

一方面熟悉GIT的操作,另一方面对下拉刷新操作做一个简单的了解与演示。

  • 为何采用原生JS进行实现?

原生JS纯净。本项目仅作演示,实际应用时不建议参考。jQuery/Zepto有大量实现此需求的插件。

兼容性

本项目采用了现代浏览器的内置函数进行功能的实现,所使用的具体方法如下:

  • CSS3选择器querySelector/querySelectorAll
  • CSS3动画animation
  • 事件侦听addEventListener
  • 触屏事件touchstart/touchmove/touchend

支持以上方法的浏览器均有效果。详情请自行参阅Can I Use

已测试通过的浏览器:

  • QQ浏览器 v9.4.1 内核 Chromium/47.0.2526.80
  • FireFox v33.1.1
  • 微信移动端自带浏览器 Android v6.3.22

可改进的地方

  • 有固定头部的下拉刷新
  • 底部上拉加载更多
  • 加入图标符合现代审美

更新日志

  • 2016-09-02 加入图标
  • 2016-07-24 代码实现
  • 2016-07-23 结构搭建
  • 2016-07-22 项目初始化