zoukankan      html  css  js  c++  java
  • 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")
    	}
    });
  • 相关阅读:
    OSI安全体系结构
    PHP 二维数组根据相同的值进行合并
    Java实现 LeetCode 17 电话号码的字母组合
    Java实现 LeetCode 16 最接近的三数之和
    Java实现 LeetCode 16 最接近的三数之和
    Java实现 LeetCode 16 最接近的三数之和
    Java实现 LeetCode 15 三数之和
    Java实现 LeetCode 15 三数之和
    Java实现 LeetCode 15 三数之和
    Java实现 LeetCode 14 最长公共前缀
  • 原文地址:https://www.cnblogs.com/jessical626/p/6213258.html
Copyright © 2011-2022 走看看