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

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

效果如下:

?

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

?

?

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

?

假设我们有这么一段html

?

[html] ?

?

? ? ? ? ? ? ? ?

?

? ? ? ? ? ? ? ? ? ? ? ?

    ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

  • 1
  • ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

  • 2
  • ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

  • 3
  • ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

  • 4
  • ?

    ? ? ? ? ? ? ? ? ? ? ? ?

?

? ? ? ? ? ? ? ?

?

? ? ? ? ? ?

?

?

?

首先先对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] ?

?

? ? ? ? ? ? ? ?

?

? ? ? ? ? ? ? ? ? ? ? ?

    ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

  • 1
  • ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

  • 2
  • ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

  • 3
  • ?

    ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

  • 4
  • ?

    ? ? ? ? ? ? ? ? ? ? ? ?

?

? ? ? ? ? ? ? ?

?

? ? ? ? ? ?

?

?

?

首先先对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教程,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/html5%e6%95%99%e7%a8%8b/html5%e6%95%99%e7%a8%8b_3016.html