在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,但是原生APP的开发,有一个很大的问题就是,你每次更新一些功能,就要用户重新下载一次版本,尤其是在iOS系统中,新版本还需要经过审核才能通过,这就使得版本的更新受到很大的限制,而如果我们改用网页来展示,那么只要改变服务器中网页的内容,那么就等于修改了APP的内容展示,有更灵活的满足更新版本。

概述

但是有一点就是,如何让web实现的页面,看起来更像是原生的APP呢,首先要想办法解决的就是下拉刷新的功能,对于这个功能,我并没有在网络上找到很好的解决方法,并且,我个人对手机端的开发,经验还是有些欠缺,这里就不罗列使用JS实现web页下拉刷新的功能了。

这里,我基于iscroll5的基础上,进行了少量的改动源代码,进而实现了下拉属性的功能,所以分享在这里,仅供参考。

关于iscroll插件

iscroll插件(官网地址)当前最新的版本是version 5版本,相对于版本4,我个人觉得,版本5变得更具有灵活性,虽然移除了一些特定的事件,特定的对外接口,但是对于使用该插件的程序员们,这个插件变得更具有操控性,这是我比较喜欢的一种插件类型,但同时,也发现了一些问题,事件中的touchend事件,不存在了(确切的说,不能说是不存在),只是被拦截了,所以一些基本的事件,都被进行了拦截,而导致无法监听到touchend事件,只能检测到scrollEnd事件,scrollEnd事件,是在页面滚动停止时,才会被触发的,所以~~

所以,根据版本5,无法检测到,是不是下拉了一段距离之后,松开时的动作了,对此,我也检查了源代码,也没有发现这个功能的实现方法,不得已,只能对源代码进行了少量的修改,所以就有了本篇文章。

修改后插件的使用

基本上,该方法并没有进行多少的修改,只是添加了两个事件的监听类型,一个叫做“slideDown”,表示下拉被触发,另一个叫做“slideUp”,表示上拉被触发。

其他,实例化中,各属性都没有进行更改,所以,关于iscroll的使用,直接参考官网的说明:iscroll官网

这里,我只对新添加的事件,添加一个demo测试,这个demo是一个很简单的demo,也只是用来说明新添加事件的用法的,如果需要用到下拉刷新或者上拉刷新的朋友,可以根据本demo自行修改。

<div id="wrapper">
<div id="scroller">
<div id = "scroller-pullDown">
<span id = "down-icon" class = "icon-double-angle-down pull-down-icon"></span>
<span id = "pullDown-msg" class = "pull-down-msg">下拉刷新</span>
</div>
<div id = "scroller-content">
<ul>
<li>Pretty row 1</li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
...
<li>Pretty row 46</li>
<li>Pretty row 47</li>
<li>Pretty row 48</li>
<li>Pretty row 49</li>
<li>Pretty row 50</li>
</ul>
</div>
<div id = "scroller-pullUp">
<span id = "up-icon" class = "icon-double-angle-up pull-up-icon"></span>
<span id = "pullUp-msg" class = "pull-up-msg">上拉刷新</span>
</div>
</div>
</div>

CSS部分这里就不多说了,有兴趣的可以直接保存该网页,然后把相关代码分离即可,对应的JSCSS代码,分别为iscroll.jsiscroll.css文件,其他的bootstrapjQuery都是我懒的原因,加入的框架。

对上述的结构进行实例化:

var myScroll,
upIcon = $("#up-icon"),
downIcon = $("#down-icon"); myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });
//probeType属性,表明此插件,可以监听scroll事件 myScroll.on("scroll",function(){
//scroll事件,可以用来控制上拉和下拉之后显示的模块中,
//样式和内容展示的部分的改变。
var y = this.y,
maxY = this.maxScrollY - y,
downHasClass = downIcon.hasClass("reverse_icon"),
upHasClass = upIcon.hasClass("reverse_icon"); if(y >= 40){
!downHasClass && downIcon.addClass("reverse_icon");
return "";
}else if(y < 40 && y > 0){
downHasClass && downIcon.removeClass("reverse_icon");
return "";
} if(maxY >= 40){
!upHasClass && upIcon.addClass("reverse_icon");
return "";
}else if(maxY < 40 && maxY >=0){
upHasClass && upIcon.removeClass("reverse_icon");
return "";
}
}); myScroll.on("slideDown",function(){
//当下拉,使得边界超出时,如果手指从屏幕移开,则会触发该事件
if(this.y > 40){
//获取内容于屏幕拉开的距离
//可以在该部分中,修改样式,并且仅限ajax或者其他的一些操作
//此时只是为了能演示该功能,只添加了一个alert功能。
//并且,由于alert会阻塞后续的动画效果,所以,
//添加了后面的一行代码,移除之前添加上的一个样式
alert("slideDown");
upIcon.removeClass("reverse_icon");
}
}); myScroll.on("slideUp",function(){
if(this.maxScrollY - this.y > 40){
//与slideDown相同的,maxScrollY表示文档区域的最大高度
alert("slideUp");
upIcon.removeClass("reverse_icon")
}
});

iscroll的更多相关文章

  1. 【IScroll深入学习】解决IScroll疑难杂症

    前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...

  2. 使用 iscroll 实现焦点图无限循环

    现在大家应该都看到过焦点图轮播的效果,这个效果是什么样我就不截图了.昨天做练习,练习要求是使用iscroll实现焦点图的无限循环滚动,并且当手指触摸焦点图后,停止焦点图的循环滚动.第一次接触iscro ...

  3. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. H5基于iScroll实现下拉刷新,上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  5. iscroll总结

    iScroll基本信息 官网:http://cubiq.org/iscroll-4 更新:2012.07.14 版本:v4.2.5 兼容:iPhone/Ipod touch >=3.1.1, i ...

  6. 【IScroll深入学习】突破移动端黑暗的利器(上)

    前言 在去年,我们对IScroll的源码进行了学习,并且分离出了一段代码自己使用,在使用学习过程中发现几个致命问题: ① 光标移位 ② 文本框找不到(先让文本框获取焦点,再滑动一下,输入文字便可重现) ...

  7. 滚动条美化实践(原生js,iscroll,nicescroll)

    近期需要改造项目中的滚动条,使原滚动条在三大浏览器下表现相同,分享一下自己的改造经历: 项目中的滚动条分布在网页的各个小窗口中,使用的是-webkit-scrollbar制作,在-webkit内核的浏 ...

  8. jquery——移动端滚动条插件iScroll.js

    官网:http://cubiq.org/iscroll-5 demo: 滚动刷新:http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/ ...

  9. iscroll 加载不全解决方案

    例如上图中,get_kaijiang 中如果执行一段ajax跨域传输的话 function get_kaijiang(){ ajax------- $('#div').append(html); -- ...

随机推荐

  1. selenium结合最新版的sikuli使用

    sikuli安装,下载sikulixsetup-1.1.0.jar,地址:https://launchpad.net/sikuli/sikulix/1.1.0 在装有Java环境的机器上直接双击jar ...

  2. lua解析脚本过程中的关键数据结构介绍

    在这一篇文章中我先来介绍一下lua解析一个脚本文件时要用到的一些关键的数据结构,为将来的一系列代码分析打下一个良好的基础.在整个过程中,比较重要的几个源码文件分别是:llex.h,lparse.h.l ...

  3. 推荐12个漂亮的 CSS3 按钮实现方案

    在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按 ...

  4. java使用Executor(执行器)管理线程

    一.一个实现了Runnable接口的类 class MyThread implements Runnable{ private static int num = 0; @Override public ...

  5. 【原创】开源.NET排列组合组件KwCombinatorics使用(一)—组合生成

           本博客所有文章分类的总目录:本博客博文总目录-实时更新 本博客其他.NET开源项目文章目录:[目录]本博客其他.NET开源项目文章目录 KwCombinatorics组件文章目录: 1. ...

  6. EntityFramework之一对一关系(二)

    前言 关于表关系园中文章也是数不胜收,但是个人觉得最难攻克的是一对一,对其配置并非无道理可循,只要掌握了原理方可,且听我娓娓道来! 共享主键关系 概念:就是两个表共享相同的主键值,也就是说一表的主键值 ...

  7. EntityFramework 如何进行异步化(关键词:async·await·SaveChangesAsync·ToListAsync)

    应用程序为什么要异步化?关于这个原因就不多说了,至于现有项目中代码异步化改进,可以参考:实际案例:在现有代码中通过async/await实现并行 这篇博文内容针对的是,EntityFramework ...

  8. 小菜学习设计模式(四)—原型(Prototype)模式

    前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...

  9. [翻译]利用顶点位移的VR畸变校正

    文章英文原网址: http://www.gamasutra.com/blogs/BrianKehrer/20160125/264161/VR_Distortion_Correction_using_V ...

  10. 数据库操作提示:Specified key was too long; max key length is 767 bytes

    操作重现: 法1:新建连接——>新建数据库——>右键数据库导入脚本——>提示:Specified key was too long; max key length is 767 by ...