脚本宝典收集整理的这篇文章主要介绍了html5教程-[使用Html5 CfxixiJS制作APP]如何用iscroll制作水平滚动的List布局，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 效果如下：

 

 

 

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

 

假设我们有这么一段html

 

[html]  

<p id="wrapperIndexActivity" class="wrapperIndexActivity">  

                <p class="scrollerActivity" id="scrollerActivity">  

                        <ul>  

                                <li>1</li>  

                                <li>2</li>  

                                <li>3</li>  

                                <li>4</li>  

                        </ul>  

                </p>  

            </p>  

 

 

首先先对ID（wrapperIndexActivity）加载iscroll

 

[javascript] 

var homeScroll = new iScroll("wrapperIndexActivity", {  

        snap : true,  

        momentum : false,  

        hScrollbar : false,  

        vScrollbar : false,  

        checkDOMChanges : true,  

        onScrollEnd : function() {  

              

  

        }  

});  

 

对Id所属class附加样式：

 

[css]  

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

 

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

 

[javascript]  

$("#scrollerActivity").style({  

        'width' : document.body.clientWidth * 4 + 'px'  

    });  

 

对应class需附加样式：

 

[css]  www.2cto.com

.wrapperIndexActivity .scrollerActivity{ height:100%; float:left; padding:0;overflow:hidden;}  

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

 

[javascript] 

$('#wrapperIndexActivity ul li ').style({  

    'width' : document.body.clientWidth + "px"  

});  

 

对应class附加样式：

 

[css]  

.wrapperIndexActivity .scrollerActivity ul li {-webkit-box-sizing:border-box;  display:block; height:100%; float:left;}  

 

最后刷新iscroll

 

[javascript]  

// 刷新数据  

omeScroll.refresh();  

 

 

 

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-[使用Html5 CfxixiJS制作APP]如何用iscroll制作水平滚动的List布局全部内容，希望文章能够帮你解决html5教程-[使用Html5 CfxixiJS制作APP]如何用iscroll制作水平滚动的List布局所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。