首页 > 语言 > JavaScript > 正文

学习使用jquery iScroll.js移动端滚动条插件

2024-05-06 15:00:47
字体:
来源:转载
供稿:网友

大家在日常工作中最常用的插件是什么,jQurey?Lazyload?但是这些都是在PC端,但是在移动端最常用的插件莫过于iScroll了,iScroll到底是什么东西,应该怎么用?iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下。
iScroll的产生:

iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上。
iScroll的使用方法:

iScroll的原理是外层有一个溢出隐藏(overflow:hidden;)的DOM,然后这个区域内的第一个DOM结构会被实例化,其包裹的内容可以纵向或者横向的滚动,所以在使用iScroll的时候,滚动元素要尽量的简单,减少DOM个数,减少嵌套,因为DOM结构越是复杂iScroll运行起来就越是吃力,有可能会造成某些节点显示不正常的情况。 所以,推荐使用的DOM结构如下:

<div id="wrapper">//overflow:hidden; <ul> //只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动, //多出的内容会被wrapper的样式hidden。  <li>1</li>  <li>2</li>  <li>3</li> </ul></div>

注意:再次重申,只有wrapper里的第一个子元素(ul)才可以被实例化滚动,并且要结合外层的DOM(wrapper)才能实现滚动。
如果 wrapper中有多个ul怎么办?很简单,记住那句话,只有wrapper里的第一个子元素(ul)才可以被实例化滚动:

<div id="wrapper">//overflow:hidden; <div id="first">  //只有第一个DOM结构(ul)被实例化,这个DOM可以纵向或者横向的滚动,  //多出的内容会被wrapper的样式hidden  <ul>   <li>1</li>   <li>2</li>   <li>3</li>  </ul>  <ul>   <li>4</li>   <li>5</li>   <li>6</li>  </ul> </div></div>

看到了吧,只有first会被实例化。 注意:这里第一个DOM结构的ID(first)可以不写,我只是为了方便大家识别才写了个ID,但是最外层的ID(wrapper)一定要写,因为在JS实例化的时候需要填写这个ID:

var myScroll = new iScroll("wrapper");

iScroll应该如何实例化:

既然说道了实例化,我们应该在什么时候实例化?据说实例化的方法有很多,但是我没用过,我只说一种:
(1)在HTML(uw3c.html)页面底部(body之后html之前)加载iscroll.js与当前页面的uw3c.js,这样能确保HTML的DOM结构能加载出来。
(2)在JS插入页面DOM结构和数据之前实例化iScroll,也就是在JS的最开始实例化,因为之后可能会使用JS来插入DOM或者数据,这样以来能确保在插入数据之前iScroll已经实例化了。

HTML://HTML结构

<html > <body>  ...code... </body>  //插入iscroll.js文件 <script type="text/javascript" src="js/iscroll.js" > </script > //插入本页面JS文件 <script type="text/javascript" src="js/uw3c.js" > </script ></html>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选