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常见问题的更多相关文章

  1. H5项目常见问题汇总及解决方案(果断复制粘贴,不解释)

    H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" co ...

  2. H5项目常见问题及注意事项

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...

  3. h5移动端常见问题

    meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 1 <meta name="viewport" content="width=device-w ...

  4. H5项目常见问题

    转自 https://github.com/FrontEndZQ/HTML5-FAQH5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面//一.HTML页 ...

  5. H5项目常见问题汇总及解决方案

    H5项目常见问题汇总及解决方案 H5   2015-12-06 10:15:33 发布 您的评价:       4.5   收藏     4收藏 H5项目常见问题及注意事项 Meta基础知识: H5页 ...

  6. html5常见问题

    H5项目常见问题汇总及解决方案 2016-12-21 FrontEndZQ JavaScript 转自 https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题 ...

  7. H5项目常见问题及注意事项,视频全屏,定位,屏幕旋转和触摸,偏页面重构向 来源joacycode的github

    Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...

  8. 手机移动端web前端常见问题整理

    移动端常见问题及解决方案 一.meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="w ...

  9. h5前端项目常见问题汇总

    原文作者:FrontEndZQ 原文链接:https://github.com/FrontEndZQ/HTML5-FAQ H5项目常见问题及注意事项 Meta基础知识: H5页面窗口自动调整到设备宽度 ...

随机推荐

  1. Linux命令: ls -F

    ls -F 列出目录中的文件 -F参数使得ls命令显示的目录文件名之后加一个斜线(“/”)字符 文件后面的星号("*")表示这是一个可执行程序

  2. 20145316许心远《网络对抗》MSF基础应用

    20145316许心远<网络对抗>MSF基础应用 实验后回答问题 用自己的话解释什么是exploit,payload,encode. exploit:顾名思义就是攻击嘛,因为是个动词,所以 ...

  3. 360在线网站安全检测,web安全测试AppScan扫描工具,XSS常用的攻击手法

    360在线网站安全检测,web安全测试AppScan扫描工具,XSS常用的攻击手法 如何做好网站的安全性测试 360网站安全检测 - 在线安全检测,网站漏洞修复,网站后门检测http://websca ...

  4. Python3 爬取微信好友基本信息,并进行数据清洗

    Python3 爬取微信好友基本信息,并进行数据清洗 1,登录获取好友基础信息: 好友的获取方法为get_friends,将会返回完整的好友列表. 其中每个好友为一个字典 列表的第一项为本人的账号信息 ...

  5. 20145310 Exp8 Web基础

    实验问题回答 (1)什么是表单 表单在网页中主要负责数据采集功能. 表单是一个包含表单元素的区域,表单元素是允许用户在表单中(比如:文本域.下拉列表.单选框.复选框等等)输入信息的元素. 表单的三个基 ...

  6. [算法整理]树上求LCA算法合集

    1#树上倍增 以前写的博客:http://www.cnblogs.com/yyf0309/p/5972701.html 预处理时间复杂度O(nlog2n),查询O(log2n),也不算难写. 2#st ...

  7. Asp.net简单概念知识

    1. 简述 private. protected. public. internal 修饰符的访问权限.答 . private :   私有成员, 在类的内部才可以访问.      protected ...

  8. 快速排序|2018年蓝桥杯B组题解析第五题-fishers

    标题:快速排序 以下代码可以从数组a[]中找出第k小的元素. 它使用了类似快速排序中的分治算法,期望时间复杂度是O(N)的. 请仔细阅读分析源码,填写划线部分缺失的内容. #include <s ...

  9. [shiro] - 加入rememberMe功能

    shiro不加入rememberMe没事,一加入就出错. RememberMeAuthenticationToken : public interface RememberMeAuthenticati ...

  10. java项目中.classpath,.settings,.project,mymetadata文件的作用

    今天犯了一个错误,误修改了本地的.classpath文件,导致项目好多地方报错,之前也没有仔细的研究过项目中的一些生成文件的作用. 今天特此进行记录. 不管我们在eclipse中新建任何的Java项目 ...