小點心家族第3位成員 樓層定位效果

2022-07-04 10:12:08 字數 1797 閱讀 6906

es6小點心,顧名思義,開箱即食,拿來即用。

獻上第 3 個小點心:floor

github

覺得有用記得 github 點個 star 喲^_^

【樓層定位】是前端日常開發中的常見需求。這個效果本身並沒有什麼高深的地方,不出意外的話,一般 jser 在幾十分鐘之內就能搞出來乙個。但如果把相容性考慮進去,那情況就要複雜多了。尤其是移動端的相容性,ui 表現不一致,scroll 事件觸發不連續,blabla...。在經過一次實現這種需求的痛苦經歷後,咱決心搞乙個外掛程式出來,不讓前端的小夥伴們再被各種相容性問題噁心到。

樓層定位的主要邏輯就是在使用者觸控螢幕並滑動時根據滾動位置判斷當前的【焦點樓層】。說簡單也簡單,如果是 pc 端,直接監聽 scroll 事件就能做到。但放在移動端,ios 的 scroll 事件觸發是不連續的,就會導致做出來的使用者體驗非常差。作為一名有追求的前端開發,豈能忍受這卡不啦唧的觸控體驗。swiper 的滑動體驗挺好的,仔細研究才發現,這b不是原生滾動,而是用 css3 的一些特性實現的模擬滾動。後來找到了 iscroll.js 外掛程式,人家專業做模擬滾動的。於是就果斷採用了 iscroll.js 作為滾動模擬器,一路跌跌撞撞,總算把樓層定位寫了出來。雖然不算完美,但相容性相對完整(不承諾相容所有機型,但大部分主流機器已通過測試),使用者體驗相隨統一且流暢。遂分享出來,歡迎各位來找茬哈^_^

閒話少敘,先上效果圖:

簡單示例

雙向聯動

複雜示例

來不及解釋了,立即檢視示例

這種效果的主要使用場景主要出現在移動端。

先定乙個小目標:

依賴乙個 jquery 已經足夠令我傷心了,每增加乙個依賴,外掛程式的易用性和受歡迎程度都會大大折扣。但是沒辦法,該依賴還得依賴。如果自己寫乙個蹩腳的 jquery 出來,不知道會搗騰出什麼隱晦的 bug 出來。之所以選擇 iscroll,是因為移動端原生的滾動事件並不盡如人意,如果只服務 pc 端,只需要繫結 scroll 事件就行了。然而到了移動端,情況變得棘手起來。移動端的區域滾動,某些ios手機上最後的慣性移動觸發不了 scroll 事件,而且安卓和 ios 的區域滾動表現相當不一致。iscroll 正是以解決這些相容性和不一致為目標,為大家帶來絲滑般一致的滾動體驗。考慮到本外掛程式的目標——同時支援 pc 和移動端,易用性和體積只能讓位於相容性了o(╥﹏╥)o

如果你對 iscroll.js 一無所知,那就太好了,因為 floor 已將它封裝的足夠簡單。當然,如果你是個 iscroll.js 磚家,這將給你提供更多的可定製性。如果你對 iscroll.js 感興趣,那麼資源全在下面咯。

iscroll 官網

iscroll api 中文版

和前幾個小點心相同的 api 風格,簡單,盡可能簡單。

下面是 floor 最簡單的使用:

const floora = new floor()
簡單,簡單是很重要的。【盡可能簡單】是在設計小點心系列 api 時的第一原則。

onfloorchange是本小點心唯一的**,也是本外掛程式最關鍵的功能。onfloorchange的觸發時機是僅在【焦點樓層】發生變化時。

將樓層滾動到指定的位置。

其他小點心:

通用彈窗

底部浮現彈窗

MySql小點心 1 賦值操作符 與

對於剛接觸到 mysql 的程式設計師來說,會對這兩個符號有疑問,因為會發現有的 裡用這個有的用另乙個。當然他們是有區別的。他們的區別也比較簡單 是真正意義上的賦值操作,左邊的變數設定為右邊的值。則只在兩種情況下作為賦值用,第一種就是在set語句裡面,set var value 另一種是在updat...

MySql小點心 2 常用的比較函式和比較操作符

1 比較操作符 這裡面就是知道下 和 意義是一樣的都是不等於的意思,看個人的喜好 是用於當比較的兩邊的值存在是空 null 的情況,這種情況有的時候會遇到,mysql提供這種方式的比較符,類似於 不同的是當兩邊要比較的數都為null的話它返回true 表示兩邊相等 如果其中有一邊是null的話它返回...