基于iscroll实现下拉和上拉刷新

http://www.zhangyunling.com/359.html

重要提示

本插件已经经过更新,查看更新的插件代码,以及介绍请查看:基于iscroll实现下拉和上拉刷新(优化);

在原生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")
    }
});


同时,注意一点,当你使用ajax添加或者删除一些新的元素时,要重新myScroll.refresh()一下,会重新计算maxScrollY区域的,以保证区域覆盖的正确性,这些东西,如果你真的使用到,那么肯定可以碰到这些问题的,所以,这里是我话多了~~~

OK,代码就是这样了,在写这个文章的时候,旁边没有Android的设备,所以,没有进行测试,只测试了IOS8的设备,所以,如果有问题,请指出,谢谢~~

上述例子的demo地址:下拉,上拉刷新demo

也可以扫描二维码:

总结

我的本意是把这个方法,写成一个基于iscroll的插件,但当前还没有完成,所以现在只给出一个最简单demo,待我闲暇时间,把该插件进行完善一下。

注:本例中引入的iscroll.js经过了作者本人的一些修改,所以跟官网的代码,有出入,如需验证该问题,请自行下载demo。

也可点击链接:下载demo

如有问题,也请不吝指教,谢谢!

本文地址:http://www.zhangyunling.com/?p=359

时间: 2024-10-19 17:45:51

基于iscroll实现下拉和上拉刷新的相关文章

使用PullToRefresh实现下拉刷新和上拉加载

使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRefresh PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的View类型,而且使用起来也十分方便. (下载地址:https://github.com/ch

Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)

PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的View类型,而且使用起来也十分方便. (下载地址:https://github.com/chrisbanes/Android-PullToRefresh) 下载完成,将它导入到eclipse中,作为一个library导入到你的工程中就好了. 一.废话少说,下拉刷新Go. 1.在你的布局文件中加上你想用的

安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载(一分钟搞定,超级简单)

前言 以前在实现ListView下拉刷新和上拉加载数据的时候都是去继承原生的ListView重写它的一些方法,实现起来非常繁杂,需要我们自己去给ListView定制下拉刷新和上拉加载的布局文件,然后添加ScrollView和OnTouch监听,设置回调接口获取数据,为了更好的交互体验,我们还不能直接利用setVisibility隐藏显示布局等等一大堆的操作,累都累死了.(题外话:关于下拉刷新在新版的android-support-v4.jar里,其实谷歌已经为我们提供了一个控件叫SwipeRef

Android ListView下拉/上拉刷新:设计原理与实现

 <Android ListView下拉/上拉刷新:设计原理与实现> Android上ListView的第三方开源的下拉刷新框架很多,应用场景很多很普遍,几乎成为现在APP的通用设计典范,甚至谷歌官方都索性在Android SDK层面支持下拉刷新,我之前写了一篇文章<Android SwipeRefreshLayout:谷歌官方SDK包中的下拉刷新>专门介绍过(链接地址:http://blog.csdn.net/zhangphil/article/details/4696537

IOS 开发下拉刷新和上拉加载更多

IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh (4)MJRefresh (5)自己实现 2.AH3DPullRefresh实现下拉刷新和上拉下载的步骤 添加UIScrollView+AH3DPullRefresh.h 和UIScrollView+AH3DPullRefresh.m两个文件,由此可知,它是基于UIScrollView的方法. 在bu

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

前言 在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等.下面是对这两种常见交互基本实现原理的阐述. 实现原理 下拉刷新 实现下拉刷新主要分为三步: 监听原生touchstart事件,记录其初始位置的值,e.touches[0].pageY: 监听原生touchmove事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0表示向下拉动,并借助CSS3的translateY属性使元素跟随手

弹性ScrollView,和下啦刷新的效果相似 实现下拉弹回和上拉弹回

今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个非常多需求都用的这样的效果 事实上这是一个自己定义的scrollView,上代码.这是我写在一个公共的组件包里的 package com.pb.soft.widget; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.view.MotionEvent; im

iOS学习之路--下拉刷新和上拉加载更多

iOS学习之路--下拉刷新和上拉加载更多 简介 本文中笔者将和大家分享应用app中常用到的表单内容的下拉刷新和上拉加载更多的功能实现的方法. 内容 1.有哪些实现方法与各方法的优劣 使用过美团,大众点评的朋友们应该有注意到,当你向上滑动表单的时候会有更多的店铺加载进你的表单中,而当你下滑表单顶的时候,则会刷新表单的内容并从网络上获取最新的信息.通过下拉刷新和上拉加载更多的功能,使app可以获取更多用户想要的信息和获取最新的信息.那么这种功能如何实现呢,还请跟着笔者继续往下看. 目前来说,主要的实

用Iscroll实现下拉刷新的简单方法

用Iscroll实现下拉刷新的简单方法: 基本步骤分三步: 1.开始滚动=== scrollStart 2,滚动过程中 === scroll 3.停止滚动=== scrollEnd 注意:在内容滚动时触发,只有在iscroll-probe.js 版本中有用.   1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <ti