使用iScroll实现上拉或者下拉刷新
上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper
这个插件, 也有人使用iScroll
这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。
iScroll简介
iScrool
是目前最成熟的自定义滚动解决方案之一,在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本:
- iscroll.js 通用版 包含了大部分公共特性
- iscroll-lite.js 缩减版 削减了一些功能特性,例如:滚动条,鼠标滚轮等等
- iscroll-probe.js 探索版 此版本可以满足你获取滚动条位置的需求。
- iscroll-zoom.js 滚动缩放版
- iscroll-infinite.js 无限制版
根据不同的需求,选择相应的版本,当前的示例中,我们选择的是iscroll-probe.js
版。
Gitbook地址:iScroll API 中文版
详细使用
代码思路则是:利用监听滚动条的scroll
事件,判断下拉或者上拉的距离,做上触发距离标记,当scrollEnd
事件触发时,执行数据加载。让我们看核心部分代码:
HTML代码结构
<div id="MyScroller" class="main"> <div class="warpper"> <div id="PullDown" class="scroller-pullDown" style="display: none;"> <img style="width: 20px; height: 20px;" src="rolling.svg" /> <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span> </div> <ul id="Content" class="dropdown-list"> </ul> <div id="PullUp" class="scroller-pullUp" style="display: none;"> <img style="width: 20px; height: 20px;" src="rolling.svg" /> <span id="pullUp-msg" class="pull-up-msg">上拉刷新</span> </div> </div> </div>
CSS样式
.scroller {position: relative; width: 100%; height: 100%; } .scroller .warpper { position: absolute; width: 100%; } .scroller-pullDown, .scroller-pullUp { width: 100%; height: 30px; padding: 10px 0; text-align: center; } .dropdown-list { padding: 0; margin: 0; } .dropdown-list li { width: 100%; background: #ddd; line-height: 45px; text-align: center; color: #FFF; border-bottom: 1px solid #FFF; }
javascript
var pullDown = document.querySelector("#PullDown"), pullUp = document.querySelector("#PullUp"), isPulled = false; // 拉动标记 var myScroll = new IScroll('#MyScroller', { probeType: 3, mouseWheel: true, scrollbars: true, preventDefault: false, fadeScrollbars: true }); myScroll.on('scroll', function() { var height = this.y, bottomHeight = this.maxScrollY - height; // 控制下拉显示 if (height >= 60) { pullDown.style.display = "block"; isPulled = true; return; } else if (height < 60 && height >= 0) { pullDown.style.display = "none"; return; } // 控制上拉显示 if (bottomHeight >= 60) { pullUp.style.display = "block"; isPulled = true; return; } else if (bottomHeight < 60 && bottomHeight >= 0) { pullUp.style.display = "none"; return; } }) myScroll.on('scrollEnd', function() { // 滚动结束 if (isPulled) { // 如果达到触发条件,则执行加载 isPulled = false; appendContent(getContents()); myScroll.refresh(); } });
完整的demo请看:
http://wewoor.github.io/js-lab/iscroll-pulldown-load/index.html
原文地址:
http://imziv.com/blog/article/read.htm?id=73
转载于:https://www.cnblogs.com/zivxiaowei/p/5566518.html
使用iScroll实现上拉或者下拉刷新相关推荐
- android ScrollView实现上拉、下拉更新
项目中需要实现对listView的上拉加载更多的功能,忙了一上午也没搞定,从网上看到一篇文章实现了listView的下拉功能,在参照着改的过程中,实现了另一种形式的上拉.下拉更新,参照文章http:/ ...
- Android新控件RecyclerView浅析及上拉和下拉刷新
概述: RecyclerView是android-support-v7-21版本中新增的一个Widgets,RecyclerView是ListView的升级版本,更加先进和灵活.在以后的开发中我们就可 ...
- 上拉电阻下拉电阻的总结
上拉电阻: 1.当TTL电路驱动COMS电路时,如果TTL电路输出的高电平低于COMS电路的最低高电平(一般为3.5V),这时就需要在TTL的输出端接上拉电阻,以提高输出高电平的值. 2.OC门电路必 ...
- 上拉、下拉电阻的原理和作用
https://www.cnblogs.com/sunshine-jackie/p/8413901.html 概述: 上拉电阻:将一个不确定的信号(高或低电平),通过一个电阻与电源VCC相连,固定在高 ...
- GPIO口配置为上拉,下拉输入
每个gpio内部有三种状态:上拉.下拉.不拉. 什么时候,需要选择上拉.下拉或不拉呢 1. 如果是output,那个一般选择no pull,这样,引脚才能根据你的output数据,进行正确输出. 2. ...
- mpvue vue 长按录音,上滑取消,下拉恢复
需求: mpvue 开发小程序实现 按住录音上滑取消,下拉恢复 知识点: touchstart touchend touchmove 事件 效果: <button@touchstart=&quo ...
- 单片机(STM32)的GPIO框图:─ 输入浮空 ─ 输入上拉 ─ 输入下拉 ─ 模拟输入 ─ 开漏输出 ─ 推挽式输出 ─ 推挽式复用功能 ─ 开漏复用功能
─ 输入浮空 ─ 输入上拉 ─ 输入下拉 ─ 模拟输入 ─ 开漏输出 ─ 推挽式输出 ─ 推挽式复用功能 ─ 开漏复用功能 GPIO框图 保护电路: 高压保护--上拉二极管 低压保护--下拉二极管 输 ...
- 上拉、下拉以及对应上拉电阻和下拉电阻的作用原理
上拉.下拉以及对应上拉电阻和下拉电阻的作用原理 一.什么是上拉和下拉电路 上拉(Pull Up )或下拉(Pull Down)电阻两者统称为拉电阻 上拉就是单片机的IO口串联一个电阻到VDD: 下拉就 ...
- Android 上拉,下拉刷新。RecyclerView的使用(最后附完整代码)
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widge ...
最新文章
- 优秀的PHP程序员至少应该了解PHP代码的优缺点(转)
- Ogre 1.7 构建编译
- 最近面试一些厂的面经整理(阿里,腾讯,字节等)
- Codeforces Round #490 (Div. 3)
- 对象存储,为什么那么火?
- 【 Gym - 101138K 】 The World of Trains (DP)
- pytorch: torch.nn.functional.affine_grid(theta,size)
- fileboy v1.9 发布,文件变更监听通知系统
- SQLite学习笔记(二)--VC调用环境搭建
- 油库蓝牙+北斗RTK人员定位方案解析
- R语言使用median函数计算dataframe指定数据列的中位数
- C++/C语言-基本语法
- 小程序获取用户信息(微信运动步数)
- 如何查询网站服务器供应商,查询网站服务器提供商
- NYOJ 304 节能(DP)
- 如何批量添加文件名前缀?
- 赵小楼《天道》《遥远的救世主》深度解析(127)一解决生存,二让心有个安处
- 数据分析从零到精通第四课 在产品需求、开发、运营和迭代中进行数据分析
- Overture5.5.3 官方版下载— 钢琴打谱软件
- cerebro 不兼容报错 os.arch=aarch64
热门文章
- python安装django模块_python中安装django模块的方法
- linux对目录进行操作,Linux 基础:对文件和目录进行操作的 Linux 和 Unix 命令 笔记...
- Java官方操纵byte数组的方式
- OSPF两种组播地址的区别和联系
- 关于多条id相同,只取其中一条记录的sql语句
- MVC + LigerUI 做后台管理还真是清爽
- 网页设计师的最佳设计工具名单出炉
- 【原创】简单轻松浏览FTP
- .net宿舍管理系统 mysql_基于.NET CORE的精美后台管理系统-RuoYi C#版
- filter过滤器实现验证跳转_返回验证结果