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

脚本宝典收集整理的这篇文章主要介绍了

html5教程-[使用Html5 CfxixiJS制作APP]如何用iscroll制作水平滚动的List布局

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

效果如下:

 

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 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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过