zepto.js 优点:(1)学习成本低,语法和jquery几乎一样,不需要花费时间来熟悉框架(2)轻量,移动端首选js框架,压缩后的资源只有5-10k
zepto.js 缺点:(1)虽然语法和jquery几乎一样,但是jquery里部分方法zepto是不支持的,用惯了jquery,如果用zepto发现有问题的时候,最好查一下所使用的方法zepto是否支持(2)貌似不支持windows phone里面的IE浏览器(3)有些特定的方法还要引入额外的文件,比如touch事件(是缺点也是优点)
以下主要列举zepto中不支持的方法,以及解决办法(持续更···):
第一次用zepto写scrollTop,不得不说自己掉坑里去了。。。代码检查了很多次,就是不出现效果,实在让人捉急,偶然脑袋一闪,好像用的是zepto,会不会是不支持这种写法,查了一下果然···被自己蠢哭,不过也挺高兴,找到了原因,并让我有一种想要知道所有zepto不支持的方法的冲动,于是创建了此篇文章,并决定持续更,在遇到问题的时候记录下来。
1、scrollTop 仅适用于整个html文档的滚动(其他情况下见~分割线~)
回归正题,zepto不支持scrollTop,那么自然有解决办法的(网上抠的一段代码,站在巨人的肩膀上 ^_^):
function scroll(scrollTo, time) {
var scrollFrom = parseInt(document.body.scrollTop),
i = 0,
runEvery = 5;
scrollTo = parseInt(scrollTo);
time /= runEvery;
var interval = setInterval(function () {
i++;
document.body.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom;
if (i >= time) {
clearInterval(interval);
}
}, runEvery);
}
上面这个函数,使用原生的js来实现jquery里animate scrollTop效果,使用起来非常方便,直接调用scroll(scrollTo,time)。 例如:scroll('0', 200);效果就是置顶效果。
这个函数使用了一个定时器,每5ms让页面滚动一次,每次滚动的距离为 目标位置与初始位置的距离/time/5,每次滚动后的位置就是 初始位置 加上 每次的滚动距离*次数。
~~~~~~~~~~~~~~~~华丽的分割线~~~~~~~~~~~~~~~~~~~
scrollTop(value) 方法在 zepto 1.0.0 版本中不支持
前几天在写一个wap端页面,由于某种原因需要让元素在一个固定高度的容器里面滚动时对容器设置scrollTop值无效,找寻了很久才发现原因是引用的库文件不支持这个方法,好吧,那就在上面scroll()函数中加点改动了~于是出现了:
function scroll(obj,scrollTo, time) {
var scrollFrom = parseInt(obj.scrollTop),
i = 0,
runEvery = 5;
scrollTo = parseInt(scrollTo);
time /= runEvery;
var interval = setInterval(function () {
i++;
obj.scrollTop = (scrollTo - scrollFrom) / time * i + scrollFrom;
if (i >= time) {
clearInterval(interval);
}
}, runEvery);
}
其实两者区别很小,只是在原来的基础上添加了一个滚动的对象obj,这样我们在滚动时就可以任意选择需要滚动的对象,并不局限于整个文档,例如document.body,div标签中id为container的元素等。此处注意,obj需要用原生方法获取document.getElementById("container"),不可用$(“#container”)。