Html5 APP 交流 QQ 群 273843464欢迎您的加入
Demo下载可去lz的Q群共享(273843464)
实现效果如下:

使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js(这里lz用了zeptoJS或者大家可以用jquery)
假设我们有这么一段html
- <div id="wrapperIndexActivity" class="wrapperIndexActivity">
- <div class="scrollerActivity" id="scrollerActivity">
- <ul>
- <li>1</li>
- <li>2</li>
- <li>3</li>
- <li>4</li>
- </ul>
- </div>
- </div>
首先先对ID(wrapperIndexActivity)加载iscroll
- var homeScroll = new iScroll("wrapperIndexActivity", {
- snap : true,
- momentum : false,
- hScrollbar : false,
- vScrollbar : false,
- checkDOMChanges : true,
- onScrollEnd : function() {
-
-
- }
- });
对Id所属class附加样式:
- .wrapperIndexActivity{ width:100%;height:100%;position:relative; z-index:1;overflow:hidden;display: block;}
然后需要对ID(scrollerActivity)计算有几幅屏幕可以切换(这里假设有4幅)
- $("#scrollerActivity").style({
- 'width' : document.body.clientWidth * 4 + 'px'
- });
对应class需附加样式:
- .wrapperIndexActivity .scrollerActivity{ height:100%; float:left; padding:0;overflow:hidden;}
再然后对li 让每一个列表项都撑满屏幕
- $('#wrapperIndexActivity ul li ').style({
- 'width' : document.body.clientWidth + "px"
- });
对应class附加样式:
- .wrapperIndexActivity .scrollerActivity ul li {-webkit-box-sizing:border-box; display:block; height:100%; float:left;}
最后刷新iscroll
Demo下载可去lz的Q群共享(273843464)
d4039b72-4f4f-4a80-a78a-4c65f6e5ec54|1|1.0|27604f05-86ad-47ef-9e05-950bb762570c
Html5, CfxixiJS