資訊專欄INFORMATION COLUMN
摘要：解說暴露到全局的方法，只要你引入，就可以得到這個(gè)實(shí)用牛逼的方法。設(shè)置頁面展現(xiàn)為全屏滑動(dòng)頁面的方法。至此，一個(gè)全屏滑動(dòng)網(wǎng)頁就完成了，難以想象的簡單快速。注意頁數(shù)是從開始的，所以上面的最后一頁是，而不是。如果想迫切試用，可以直接查看文檔。
現(xiàn)在滑屏網(wǎng)頁越來越多，比如我在搜狐視頻就做了好幾個(gè)，舉個(gè)例子，可以用手機(jī)掃描以下的二維碼訪問：
之前寫這樣的頁面可能還要糾結(jié)選擇什么庫，然后再寫一堆touch的事件，再加上寫樣式寫HTML，可能幾個(gè)小時(shí)就這么過去，才算完成。
現(xiàn)在不一樣了。
有了Slip.js，你只管寫HTML，CSS，如果邏輯簡單，一行JS代碼就可以搞定，大大提升了開發(fā)的效率。不吹牛，上面的demo，不到半小時(shí)我就寫好了。
具體怎么做呢？比如有個(gè)需求是：
我們有4個(gè)頁面，每個(gè)頁面有一張圖片，每次手指滑動(dòng)都切換一整屏。
首先看HTML：
... ...
再看CSS:
/* 按自己需要來定義吧，不寫也沒關(guān)系 */
最后看JS：
var container = document.getElementById("container");
var pages = document.querySelectorAll(".page");
var slip = Slip(container, "y").webapp(pages);
就這么簡單，可以查看效果。
解說：
Slip：暴露到全局的方法，只要你引入slip.js，就可以得到這個(gè)實(shí)用牛逼的方法。
container: 被滑動(dòng)的容器，里面是每個(gè)滑動(dòng)頁面。
"y": 頁面滑動(dòng)的方向，你也可以傳入"x"。
webapp: 設(shè)置頁面展現(xiàn)為全屏滑動(dòng)頁面的方法。
pages: 頁面元素列表。
說好的一行代碼搞定的：
Slip(document.getElementById("container"), "y").webapp();
可以發(fā)現(xiàn)，上面的一行代碼并沒有定義pages:
當(dāng)webapp方法不傳遞參數(shù)的時(shí)候，Slip會(huì)獲取container的直接子元素（兒子元素）作為pages。
至此，一個(gè)全屏滑動(dòng)網(wǎng)頁就完成了，難以想象的簡單快速。我用半小時(shí)，你10分鐘應(yīng)該就可以。
當(dāng)然：Slip.js還有很多更強(qiáng)大的功能，比如你可以自己定義頁面滑動(dòng)時(shí)要做什么，PM看你完成的這么快，就給你加了很有意思的需求：
當(dāng)頁面滑動(dòng)到最后一頁的時(shí)候，刷新一下。。。
你只需要加幾行代碼就可以搞定：
Slip(document.getElementById("container"), "y").webapp().end(function() {
if (this.page === 3) location.reload();
});
看，是不是很簡單，是不是還沒來得及抱怨這個(gè)需求，就已經(jīng)完成它了，是不是有種前所未有的快感。來看看效果吧。
注意：頁數(shù)是從0開始的，所以上面的最后一頁是3，而不是4。
如果你看到了這里還沒離開，我想你對(duì)Slip.js應(yīng)該還是至少有點(diǎn)興趣的，那么你可以去Github關(guān)注它。
如果想迫切試用Slip.js，可以直接查看文檔。
如果想要看看Slip.js如何實(shí)現(xiàn)，可以查看源碼。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/87643.html
摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)Web開發(fā)需要注意...
摘要：隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)開發(fā)需要注意的事項(xiàng)進(jìn)行一下總結(jié)，必然不可能涉及方方面面，但會(huì)隨著筆者的積累持續(xù)更新。 隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展，移動(dòng)Web已經(jīng)逐漸成為互聯(lián)網(wǎng)的主要入口，隨之而來的是前端在移動(dòng)Web開發(fā)上面臨的各種機(jī)遇與挑戰(zhàn)，本文就一些常見移動(dòng)端問題對(duì)移動(dòng)Web開發(fā)需要注意...
摘要：國慶前幾天花了點(diǎn)時(shí)間寫一個(gè)整屏滑動(dòng)的移動(dòng)頁面的，時(shí)間短暫還有很多東西沒寫。其中碰到的坑是的時(shí)間通過無法阻擋默認(rèn)事件，只能，但是電腦上模擬移動(dòng)頁面可以使用 國慶前幾天花了點(diǎn)時(shí)間寫一個(gè)整屏滑動(dòng)的移動(dòng)頁面的demo，時(shí)間短暫還有很多東西沒寫。 跟基友 http://segmentfault.com/blog/laopopo/1190000000708417 差不多，但思路上不太一樣，大家可...
摘要：基礎(chǔ)知識(shí)頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼忽略平臺(tái)中對(duì)郵箱地址的識(shí)別當(dāng)網(wǎng)站添加到主屏幕快速啟動(dòng)方式，可隱藏地址欄，僅針對(duì)的版本以后，上已看不到效果將網(wǎng)站添加到主屏幕快 meta基礎(chǔ)知識(shí)H5頁面窗口自動(dòng)調(diào)整到設(shè)備寬度，并禁止用戶縮放頁面 忽略將頁面中的數(shù)字識(shí)別為電話號(hào)碼 忽略Android平臺(tái)中對(duì)郵箱地址的識(shí)別 當(dāng)網(wǎng)站添加到主屏幕快...
閱讀 1028·2019-08-30 15:55
閱讀 619·2019-08-26 13:56
閱讀 2151·2019-08-26 12:23
閱讀 3373·2019-08-26 10:29
閱讀 669·2019-08-26 10:17
閱讀 2937·2019-08-23 16:53
閱讀 773·2019-08-23 15:55
閱讀 2933·2019-08-23 14:25
