Zepto常见问题
Zepto遇到的问题
延时
总所周知,默认click事件,会有300ms的延时问题,Zepto的tap事件很好的解决了这个问题。但是也挖了一个大坑。
点透
Zepto的点透应该也是大家比较熟悉的了。当两个层叠加的时候,上层绑定的tap事件触发后会穿透到底层,恰好底层有个a标签,页面就跳转了。为了解决这个问题,我不得不把tap事件换成click事件,由于click事件有延时,还得引入了第三方的类库FastClick。
计算宽高
一个很简单的Tip提示,例如‘操作成功’、‘登录失败’等等简单的提示,Tip在show之前,我会计算让Tip居中显示:
var left = ($(window).width() - $pop.width()) / 2 + $(window).scrollLeft();
然而$pop.width()始终为0,对于不可见元素,获取的宽高度始终为0,但是jQuery就能正常获取到,我又不得不采取如下的处理方式:
var cssShow = {visibility: 'hidden', display: 'block'};
var cssHide = {visibility: 'visible', display: 'none'};
$pop.css(cssShow);
var left = ($(window).width() - $pop.width()) / 2 + $(window).scrollLeft();
$pop.css(cssHide);
$pop.css({
left: left > 0 ? left : 0
});
小结
Zepto相对于JQuery来说确实比较轻量,但是成熟度还差得远,当出现点透和计算宽高失效的时候,我对Zepto有点灰心,希望Zepto后续能够及时升级解决这些问题,不然就使用jQuery了,特别是jQuery升级到版本2,也是相当不错的选择。
浏览器的坑
禁用滚动
当页面弹出一个选择框。滑动屏幕,背后的页面跟着滚动,特别是在safari下,那效果太恶心,所以我选择禁用body的滚动。最暴力的解决方式是:
$(document).on('touchmove',function(e){
e.preventDefault();
});
这样会同时禁用掉弹出层的滚动效果,明显不可取,所以我才用下面的方式:
.alpha {
height: 100%;
overflow: hidden;
position: relative;
}
.alpha body {
height: 100%;
overflow: hidden;
}
当遮盖弹出的时候或者隐藏的时候让html切换class alpha
$('html').toggleClass('alpha');
回到顶部
对于PC端,直接这样写,就会有一个向上平滑滚动的效果,然而对于移动端来说,并没有什么卵用:
$('body,html').animate({scrollTop: 0});
还是使用了第三方的插件模式出这个效果的scrollToTop。
Css中的…
单
Width:100px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
多行
Display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
一个元素在另一个元素中水平垂直居中
Zepto常见问题的更多相关文章
- H5项目常见问题汇总及解决方案(果断复制粘贴,不解释)
H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" co ...
- H5项目常见问题及注意事项
Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...
- h5移动端常见问题
meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 1 <meta name="viewport" content="width=device-w ...
- H5项目常见问题
转自 https://github.com/FrontEndZQ/HTML5-FAQH5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面//一.HTML页 ...
- H5项目常见问题汇总及解决方案
H5项目常见问题汇总及解决方案 H5 2015-12-06 10:15:33 发布 您的评价: 4.5 收藏 4收藏 H5项目常见问题及注意事项 Meta基础知识: H5页 ...
- html5常见问题
H5项目常见问题汇总及解决方案 2016-12-21 FrontEndZQ JavaScript 转自 https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题 ...
- H5项目常见问题及注意事项,视频全屏,定位,屏幕旋转和触摸,偏页面重构向 来源joacycode的github
Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...
- 手机移动端web前端常见问题整理
移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="w ...
- h5前端项目常见问题汇总
原文作者:FrontEndZQ 原文链接:https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度 ...
随机推荐
- 【转】编程思想之多线程与多进程(3)——Java中的多线程
<编程思想之多线程与多进程(1)——以操作系统的角度述说线程与进程>一文详细讲述了线程.进程的关系及在操作系统中的表现,这是多线程学习必须了解的基础.本文将接着讲一下Java中多线程程序的 ...
- emoj表情过滤
用法: isEmojiCharacter(input_value) // 提交时候校验.true:emoj表情 undefined:无 if(isEmojiCharacter(val) ...
- Linux 远程连接sftp与ftp
linux sftp远程连接命令 sftp -oPort=60001 root@192.168.0.254 使用-o选项来指定端口号. -oPort=远程端口号 sftp> get /var/w ...
- click 在网页测试手机模式下无效,不能执行。调成非手机模式即可
click 在网页测试手机模式下无效,不能执行. 调成非手机模式即可
- DNS正反向区域解析(二)
域名查询工具 Nslookup命令 >server 202.106.0.20 #指定DNS服务器 >set q=A #指定要查询的类型(A,PTR,MX,CNAME,NS) >www ...
- 使用libcurl开源库和Duilib做的下载文件并显示进度条的小工具
转载:http://blog.csdn.net/mfcing/article/details/43603525 转载:http://blog.csdn.net/infoworld/article/de ...
- 在服务中用管理员权限创建一个可弹出UI的进程 (转载)
转载:http://blog.csdn.net/woshinia/article/details/7850295 转载:http://blog.csdn.net/hurryboylqs/article ...
- Windows下卸载软件时提示 等待先前的卸载完成? 终止 dllhost.exe 进程
只要结束进程中的 "dllhost" 进程就好了. 估计原因是, 当卸载某些 "所谓的"较大型的软件的时候, 要去更新, 更改系统对dll链接库的注册, 更新. ...
- java 关于wait,notify和notifyAll
public synchronized void hurt() { //... this.wait(); //... } public synchronized void recover() { // ...
- 51nod 1009 数字1的数量
1009 数字1的数量 给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数. 例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5 ...