仿原生app下拉和上拉刷新

前端开发 1864 Views 0 Comments

在原生APP的开发中,有一个常见的功能,就是下拉刷新的功能,这个想必大家都是知道的,当我们前端在开发移动页面时也经常会遇到这样的需求,现在我们用网页的形式仿一个。

废话不多说直接先看我的一个小demo吧:http://www.asheep.cn/demo/slide-up-down/

或者扫描二维码,手机体验:
仿原生app下拉和上拉刷新

关于iscroll插件

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

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

修改后插件的使用

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

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

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

html代码

  1. <div id="wrapper">
  2.     <div id="scroller">
  3.         <div id="scroller-pullDown">
  4.             <span id="down-icon" class="icon-double-angle-down pull-down-icon"><img src="./images/loading.gif"></span>
  5.             <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
  6.         </div>
  7.         <div id="scroller-content">
  8.             <ul class="list">
  9.                 <li>demo1</li>
  10.                 <li>demo1</li>
  11.                 <li>demo1</li>
  12.                 <li>demo1</li>
  13.                 <li>demo1</li>
  14.                 <li>demo1</li>
  15.                 <li>demo1</li>
  16.             </ul>
  17.         </div>
  18.         <div id="scroller-pullUp">
  19.             <span id="up-icon" class="icon-double-angle-up pull-up-icon"><img src="./images/loading.gif"></span>
  20.             <span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>
  21.         </div>
  22.     </div>
  23. </div>

js代码

  1. $(function(){
  2.     var myScroll,
  3.         upIcon = $("#up-icon"),
  4.         downIcon = $("#down-icon")
  5.         target = $(".list"),
  6.         temp = " ";
  7.     myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true });//probeType属性,表明此插件,可以监听scroll事件
  8.     myScroll.on("scroll",function(){
  9.         //scroll事件,可以用来控制上拉和下拉之后显示的模块中,
  10.         //样式和内容展示的部分的改变。
  11.         var y = this.y,
  12.             maxY = this.maxScrollY - y,
  13.             downHasClass = downIcon.hasClass("reverse_icon"),
  14.             upHasClass = upIcon.hasClass("reverse_icon");
  15.         if(y >= 40){
  16.             !downHasClass && downIcon.addClass("reverse_icon");
  17.             return "";
  18.         }else if(y < 40 && y > 0){
  19.             downHasClass && downIcon.removeClass("reverse_icon");
  20.             return "";
  21.         }
  22.         if(maxY >= 40){
  23.             !upHasClass && upIcon.addClass("reverse_icon");
  24.             return "";
  25.         }else if(maxY < 40 && maxY >=0){
  26.             upHasClass && upIcon.removeClass("reverse_icon");
  27.             return "";
  28.         }
  29.     });
  30.     myScroll.on("slideDown",function(){
  31.         //当下拉,使得边界超出时,如果手指从屏幕移开,则会触发该事件
  32.         if(this.y > 40){
  33.             //获取内容于屏幕拉开的距离
  34.             //可以在该部分中,修改样式,并且仅限ajax或者其他的一些操作
  35.             //此时只是为了能演示该功能,只添加了一个alert功能。
  36.             //并且,由于alert会阻塞后续的动画效果,所以,
  37.             //添加了后面的一行代码,移除之前添加上的一个样式
  38.             //alert("slideDown");
  39.             //upIcon.removeClass("reverse_icon")
  40.             temp='<li>我是新加进来的</li>\
  41.             <li>我是新加进来的</li>';
  42.             target.before(temp);
  43.             myScroll.refresh();
  44.         }
  45.     });
  46.     myScroll.on("slideUp",function(){
  47.         if(this.maxScrollY - this.y > 40){
  48.             //与slideDown相同的,maxScrollY表示文档区域的最大高度
  49.             //alert("slideUp");
  50.             //upIcon.removeClass("reverse_icon")
  51.             temp='<li>我是新加进来的</li>\
  52.             <li>我是新加进来的</li>';
  53.             target.append(temp);
  54.             myScroll.refresh();
  55.         }
  56.     });
  57. })

css代码我就不贴出来了,看demo里,很简单了。

最后,注意两点

1、当你使用ajax添加或者删除一些新的元素时,要重新myScroll.refresh()一下,会重新计算maxScrollY区域的,以保证区域覆盖的正确性,

2、当内容部分有a链接需要加上click: true ,如 myScroll = new IScroll('#wrapper', { probeType: 3, mouseWheel: true, click: true })

这些东西,如果你真的使用到,那么肯定可以碰到这些问题的,所以,这里是我话多了~~~

转载请注明:一只羊博客 » 仿原生app下拉和上拉刷新

分享到:
(9)

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址