移动端框架 滚动类 iScroll5

HTML5学堂:移动端开发中,经常遇到需要模拟APP的效果header或是footer固定住,里面的内容区域实现滚动。但是对低端手机单纯使用CSS是兼容不了,需要JavaScript的支持。本文讲解了使用iScroll5的使用方法,解决了固定高度的容器内滚动内容。

iscroll诞生的意义

之所以iscroll会诞生,主要是因为无论是在以前的iphone、ipod、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时,只能由一个绝对定位的header或是footer再加上一个可以内容的滚动的中间区域组成。

  position:fixed在ios和android的使用,而ios4(4以及以前)系统以及以前的安卓系统(2.3及以前)并不支持position:fixed。这个问题可以使用iScroll框架进行解决。

  之前一直都在使用iScroll4.0版本,后来查到iScroll5已经比较稳定了(即度过了“测试版”),于是转到了5这个版本上,不过~iScroll5和iScroll4的差别有些大,包括语法都发生了很大的变化~

基本的结构要求

使用iScroll这个脚本库时,DOM树的结构要足够简单,移除不必要的标签,尽量避免过多的标签嵌套使用。

如果希望ul中的内容发生滚动,需要在外层添加一层,同时将iScroll的功能添加到最外层上。官方给出的demo结构为:

<div id="wrapper">
   <ul>
       <li>...</li>
       <li>...</li>
       ...
   </ul>
</div>

iScroll的实例化(与iScroll4版本有所区别,需注意):

var myScroll = new IScroll('#wrapper');

i改成了大写。后面的目标由原来的只能是DOM对象或者id改成可以支持DOM对象和选择器选择

官方建议在window.onload之后使用,如果使用$(document).ready也可以,但是需要能够获取到滚动区域的高度或宽度。为滚动区域增加position:relative或者absolute,能够解决大部分尺寸计算上的问题。

iScroll功能配置 —— 通过第二个参数进行滚动功能的相关设置

   var myScroll = new IScroll('#wrapper', {
       mouseWheel: true,
       scrollbars: true
   });

事件的绑定:仿造jquery的on绑定事件的方式

element.addEventListener('tap', doSomething, false); // 原生
$('#element').on('tap', doSomething); // jQuery

一些常用方法:

zoom(scale, x, y, time) 放大和缩小

refresh方法 —— 在DOM树发生变化时,应该调用此方法

scrollTo(x, y, time, easing) 滚动到某个位置

scrollToElement(el, time, offsetX, offsetY, easing) 滚动到某个元素

offsetx和offsety定义像素偏移,这样你可以滚动到元素加上一个指定的偏移量

easing 的具体方法被放置在了 IScroll.utils.ease当中,包含:quadratic, circular, back, bounce, elastic

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python、Flask、Django

Django The messages framework

1152
来自专栏游戏开发那些事

【Unity游戏开发】SDK接入与集成——小白入门篇

  通常一款游戏开发到后期,一般都会涉及到第三方SDK的接入与集成,对于不熟悉SDK接入的同学来说,接SDK每次都是云里雾里,而熟悉SDK接入的同学又觉得不断地...

1362
来自专栏跟着阿笨一起玩NET

客户端程序传送图片到服务器

转载:http://www.cnblogs.com/networkcomms/p/4314898.html

1132
来自专栏编程

ContentProvider使用方法详解

是四大组件之一,其本质上是一个标准化的数据管道,它屏蔽了底层的数据管理和服务等细节,以标准化的方式在 应用间共享数据。用户可以灵活实现所封装的数据存储以及增删改...

19510
来自专栏葡萄城控件技术团队

【图解】FlexGrid Explorer 全功能问世

在去年的时候,我们推出了FlexGrid Demo,包含了FlexGrid的常用功能,如分组、滚动、冻结、自定义单元格类型、搜索面板、表格过滤器、树形结构、合并...

823
来自专栏九彩拼盘的叨叨叨

javascript 组件

1233
来自专栏郭霖

Android最佳性能实践(二)——分析内存的使用情况

由于Android是为移动设备开发的操作系统,我们在开发应用程序的时候应当始终把内存问题充分考虑在内。虽然Android系统拥有垃圾自动回收机制,但这并不意味着...

1856
来自专栏dotnet core相关

datatables 配套bootstrap3样式使用小结(1)

公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下。

782
来自专栏Android群英传

Clipboard还能玩出花

812
来自专栏我爱编程

Day21第三方模块Pillow&requests

Pillow PIL:Python Imaging Library,已经是Python平台事实上的图像处理标准库了。PIL功能非常强大,但API却非常简单易用。...

3045

扫码关注云+社区