【使用Html5 CfxixiJS制作APP】如何用iscroll制作水平滚动的List布局
2012-12-25 01:45
701 查看
效果如下:
使用iscroll实现这样的布局可不容易。。。需要前端拥有良好的css功底然后利用js(这里lz用了zeptoJS或者大家可以用jquery)
假设我们有这么一段html
首先先对ID(wrapperIndexActivity)加载iscroll
对Id所属class附加样式:
然后需要对ID(scrollerActivity)计算有几幅屏幕可以切换(这里假设有4幅)
对应class需附加样式:
再然后对li 让每一个列表项都撑满屏幕
对应class附加样式:
最后刷新iscroll
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
// 刷新数据 homeScroll.refresh();
Demo下载可去lz的Q群共享(273843464)
相关文章推荐
- gulp之使用iscrolljs.com实现区域滚动
- 如何用HTML5制作iPhone App
- 教你如何使用node.js制作代理服务器
- 使用backbone.js、zepto.js和trigger.io开发HTML5 App
- 如何使用Createjs来编写HTML5游戏(三)使用EaselJS中的制作Sprite类制作
- 详解使用JS如何制作简单的ASCII图与单极图
- 如何使用construct2制作 HTML5
- 如何用HTML5制作iPhone App
- Android中使用GridLayout网格布局来制作简单的计算器App
- HTML-移动端如何使用css让百分比布局的弹窗水平和垂直方向上居中
- 如何使用Createjs来编写HTML5游戏(五)PreloadJS和SoundJS
- 教你如何使用node.js制作代理服务器
- Egret的滚动list列表如何使用
- app放大缩小,同时左右切换页面。插件pinchzoom.js在iscroll和swipper中使用
- 如何使用 HTML5 Canvas 制作水波纹效果
- 6.如何使用CardView制作卡片布局效果
- 如何制作Vuejs组件,并且在项目中使用
- HTML5 audio元素如何使用js与jquery控制其事件
- 教你如何使用node.js制作代理服务器
- 如何使用 HTML5 Canvas 制作水波纹效果