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”)。