CFXIXI工作室首页
CF西西的博客 | 【使用Html5 CfxixiJS制作APP】如何用iscroll制作水平滚动的List布局

【使用Html5 CfxixiJS制作APP】如何用iscroll制作水平滚动的List布局

25. 十二月 2012
评论 (0)

Html5 APP 交流 QQ 群 273843464欢迎您的加入

Demo下载可去lz的Q群共享（273843464）

实现效果如下：

 

使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js（这里lz用了zeptoJS或者大家可以用jquery）

假设我们有这么一段html

 

[html] view plaincopy
 
  1. <div id="wrapperIndexActivity" class="wrapperIndexActivity">  
  2.                 <div class="scrollerActivity" id="scrollerActivity">  
  3.                         <ul>  
  4.                                 <li>1</li>  
  5.                                 <li>2</li>  
  6.                                 <li>3</li>  
  7.                                 <li>4</li>  
  8.                         </ul>  
  9.                 </div>  
  10.             </div>  



 

首先先对ID（wrapperIndexActivity）加载iscroll

 

[javascript] view plaincopy
 
  1. var homeScroll = new iScroll("wrapperIndexActivity", {  
  2.         snap : true,  
  3.         momentum : false,  
  4.         hScrollbar : false,  
  5.         vScrollbar : false,  
  6.         checkDOMChanges : true,  
  7.         onScrollEnd : function() {  
  8.               
  9.   
  10.         }  
  11. });  

 

对Id所属class附加样式：

 

[css] view plaincopy
 
  1. .wrapperIndexActivity{ width:100%;height:100%;position:relative; z-index:1;overflow:hidden;display: block;}  

 

 

 

然后需要对ID（scrollerActivity）计算有几幅屏幕可以切换（这里假设有4幅）

 

[javascript] view plaincopy
 
  1. $("#scrollerActivity").style({  
  2.         'width' : document.body.clientWidth * 4 + 'px'  
  3.     });  

 

对应class需附加样式：

 

[css] view plaincopy
 
  1. .wrapperIndexActivity .scrollerActivity{ height:100%; float:left; padding:0;overflow:hidden;}  

 

 

再然后对li 让每一个列表项都撑满屏幕

 

[javascript] view plaincopy
 
  1. $('#wrapperIndexActivity ul li ').style({  
  2.     'width' : document.body.clientWidth + "px"  
  3. });  

 

对应class附加样式：

 

[css] view plaincopy
 
  1. .wrapperIndexActivity .scrollerActivity ul li {-webkit-box-sizing:border-box;  display:block; height:100%; float:left;}  

 

 

最后刷新iscroll

 

[javascript] view plaincopy
 
  1. // 刷新数据  
  2. omeScroll.refresh();  


Demo下载可去lz的Q群共享（273843464）

Html5, CfxixiJS