您的位置：首页 > 其它

基于iScroll 的开发（不断补充）

2012-07-24 21:53 169 查看
iScroll是一个JS插件，支持鼠标和触摸的滑动、滚动操作，可用于实现列表（横、纵、矩阵）、图片幻灯式播放等效果。

本文结合实例，解析iScroll的使用方法以及注意事项。

说明：本文使用的版本是iScroll4http://cubiq.org/iscroll-4(更新的版本见https://github.com/cubiq/iscroll)

基本概念

使用iscroll一般需要构造如下结构：

<divclass="wrapper">
<divclass="scroller">
<ul>
<li></li>
......
<li></li>
</ul>
</div>
</div>

最外层是wrapper，用于实例化iScroll的div。

wrapper里面是一个scroller，scroller的宽高与wrapper的宽高共同决定着列表有多少行多少列。例如:

.wrapper{
width:100px;
height:100px;
}

.scroller{
width:300px;
height:200px;
}

则列表会有2行，3列，横向可以滚3屏，纵向可以滚2屏。





从上图中可以看出，wrapper之于scroller，就像viewport之于document.

wrapper的宽高好说，你想让它多大就设置多大。

对于scroller，当元素个数不确定的时候，宽高是要计算出来。

动态计算scroller宽高

为演示如何动态计算宽高，我写了一个JQueryUIWidget，并且配了一个demo。（代码下载：http://files.cnblogs.com/dc10101/diorama.zip）

这个widget做的事情就是绘制一个横向滑动或纵向滑动的iscroll，插件使用者只需指定wrapper（也就是可见区域）的宽高，scroller的宽高会自动计算出来。

由于iscroll本身是用float:left来排列元素，因此在绘制横向滑动的iscroll时要调换一下各元素的位置，这些算法在插件的代码中都有体现。

以下截图展示了横向纵向两种iscroll的样子，以及向尾部添加元素后的状态。








.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航