移动前端知识总结(二)

kyle 2016-11-11 434次浏览 0条评论 0 打赏作者 0 0

常用的移动端框架

zepto.js

语法与jquery几乎一样,会jquery基本会zepto~

最新版本已经更新到1.16

官网:http://zeptojs.com/

中文(非官网):http://www.css88.com/doc/zeptojs_api/

常使用的扩展模块:

浏览器检测:https://github.com/madrobby/zepto/blob/master/src/detect.js

tap事件:https://github.com/madrobby/zepto/blob/master/src/...

iscroll.js

解决页面不支持弹性滚动,不支持fixed引起的问题~

实现下拉刷新,滑屏,缩放等功能~

最新版本已经更新到5.0

官网:http://cubiq.org/iscroll-5

underscore.js

笔者没用过,不过听说好用,推荐给大家~

该库提供了一整套函数式编程的实用功能,但是没有扩展任何javascript内置对象。

最新版本已经更新到1.8.2

官网:http://underscorejs.org/

滑屏框架

适合上下滑屏、左右滑屏等滑屏切换页面的效果

slip.js

iSlider.js

fullpage.js

flex布局
flex布局目前可使用在移动中,并非所有的语法都全兼容,但以下写法笔者实践过,效果良好~

/* ============================================================
flex:定义布局为盒模型
flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
兼容性:ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

示例:两端对齐

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
/* ============================================================
flex:定义布局为盒模型
flex-v:盒模型垂直布局
flex-1:子元素占据剩余的空间
flex-align-center:子元素垂直居中
flex-pack-center:子元素水平居中
flex-pack-justify:子元素两端对齐
兼容性:ios 4+、android 2.3+、winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
</style>
</head>
<body>

<div class="flex flex-pack-justify">
<div>模块一</div>
<div>模块二</div>
<div>模块三</div>
<div>模块四</div>
</div>

</body>
</html>

使用注意:flex下的子元素必须为块级元素,非块级元素在android2.3机器下flex失效

参考:

flexyboxes

“老”的Flexbox和“新”的Flexbox

跨浏览器的Flexbox

FastClick

消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟

0

0 条评论

    没有找到数据。

发表评论

kyle
土豪

kyle

注册时间:2016-10-28
最后登录:1个月前
发布
带到手机上看