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

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

效果如下：

使用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

	// 刷新数据
homeScroll.refresh();

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