移動端開發HTML5（H5）採用SwiperJS單屏垂直滑動頁面中，某頁內容高度超出屏幕高度解決辦法

移動端開發HTML5（H5）採用SwiperJS單屏垂直滑動頁面中，某頁內容高度超出屏幕高度解決辦法

當產品給我原型的時候，我以爲這是一個普通的專題，爲了趕時間（下班前給的設計稿，產品姐姐說，明早要上！）。當我下班時拿到設計師給出了基於iPhone6分辨率的設計稿時，我陷入了沉思。

不得不說，總體設計十分飽滿，看起來內容很豐富。在750*1334分辨率下的圖片顯示完美。

然而，不是全部手機看到的都是這個圖的模樣，最重要的是不一樣瀏覽器有不一樣高度的標題欄，底部有菜單欄，還有甚者，還有虛擬按鍵欄（某些安卓手機例如Meizu MX3）。做爲單屏垂直滑動的頁面，若是能完美呈現如此飽滿的內容，而且不會出BUG呢。

廢話少說，目前的情況就是：這個單屏滑動的頁面中，存在部分slide的內容根本沒法一屏恰好顯示完，所以，在這些高度大於瀏覽器可視窗高度的slide內，須要一個上下滑動來查看該slide所有內容。而兩個上下滑動的操做又會產生衝突。對於這個問題該如何解決呢？通過這幾天的研究，我目前得出來了兩個方案。如今來介紹一下：

方案一：在超出可視高度的swiper-slide的內經過設置allowTouchMove參數來開啓/禁用滑屏切換的操做

該方案內容較長，廢話較多，是我的嘗試解決問題的一點心得，若無興趣可直接看方案二

開發流程和思考：

首先建議下載demo-1在本地，經過Chrome手機模擬或者手機（手機預覽須要自行開本地服務器）運行一下看看效果，體驗一下實際使用感覺和以爲有哪些問題。

因爲整個頁面僅花了幾個小時完成，大部分時間用於閱讀swiperjs官方文檔解決該問題，所以頁面代碼相對混亂，而且方案一併不是最優化方案，所以再也不優化。其實也由於對於swiperjs的API不夠熟悉，因此寫了不少不太優化的冗餘代碼，因此DEMO-1主要介紹個人一些開發過程當中勉強實現效果的想法。

前奏：

坑爹的設計啊，又不是人人都是iPhone6！T_T。設計稿單屏顯示效果好，時間不夠設計是不可能改了，找產品聊天，說，既然都單屏滑動，這個設計內容太飽和，我壓縮一下，儘可能大部分設備能顯示完整內容區域，產品不一樣意。但是苦了我這個小前端。口頭上對產品說，那你找個內容超出屏幕高度的實例我看看，我都沒見過！內心仍是軟軟的，要不試試吧，說不定很容易呢。

開發ing：

先按照SwiperJs的DEMO搭好頁面，作好樣式。反正趕時間，所有切整圖，細節無論了。很快頁面雛形有了。此刻沒有開始的loading的。

接下來作滑動，很顯然，的確按照設計稿一屏根本顯示不完，加上該死的各類狀態欄佔用的高度，實際可視區域很小。然而怎麼獲取到每屏內部的高度呢，有些屏是整張背景圖，是沒有高度的，這種，好說，我直接寫高寬最小100%。有的有內容，可是如何檢測到呢，首先每一個slide裏面都要有一個wrap，我這裏用的類名page，全部樣式都是基於page來的，而後頁面加載的時候，在底部建立了個臨時的div，遍歷有幾個slide，每次都將slide寫入臨時div，而後獲取到真實高度，再添加一個realheight屬性給對應的slide，遍歷結束後清除臨時div，這樣每一個slide的真實高度就有了。

接下來，每次滑倒對應的slide的時候，開始檢測它的內容高度realheight，是否超出了可視區高度，若是超出，我就阻止了allowTouchMove，以下：

mySwiper.allowTouchMove = false;

這下能夠內部滾動了，可是到了底我要滑到下一屏咋辦，要釋放allowTouchMove，因而又在這裏加了一個滾動監聽事件，當滾到底部時，設置爲true，固然一樣到滑倒頂部也要設置true，以便返回上一屏，止於此處的具體優化就很少說了。原理大概就是這樣~

彷佛都調試好了，其實還有個隱藏的問題，就是我這個頁面的圖片較多，網速較差的狀況下，圖片未能加載完，真實高度是沒法獲取到的。因而又要想辦法弄了一個圖片加載結束後纔開始執行其餘腳本。這裏趕時間也就隨便找了一段抄過來了，還挺好用。抄自Can I sync up multiple image onload calls?，順便又加了個簡單的loading頁面。反覆測試了幾回，看起來勉強仍是能夠的，因而找產品聊了聊，好在基本上過了。

總結：

雖然說，其實代碼方面有不少問題，可是有時候工做上速度比質量更重要，也就先這樣上線了~一樣的我在上線後有了時間的狀況下，繼續尋求更佳的解決辦法，因而才找到方案二~

方案二：做者給出的完美方案（4.x測試經過 ）

經過監聽swiperjs內部的touchstart和touchmove獲取到手指滑動的垂直高度差，判斷滑動手勢的方向，並獲取slide.scrollHeight和slide.offsetHeight值（也就是DEMO-1中的獲取頁面可視區域高度的方法。），以便獲得正確的是否爲內部滾動檢測。若是是，則阻止touchmove事件，我當時徹底不知道這個阻止了就能阻止切屏了。

固然，css對應的也要寫好。

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background: #f1f1f1;
  color: #000;
  text-align: center;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

其實看一下源碼就很清楚了。在目前，我未發現任何BUG。也算是完美了SwiperJS的另外一個官方未有展現的功能~

最後附上demo-2代碼和頁面線上效果

寫在最後

其實，有時候，本身遇到的問題，其實不少人都遇到過，雖然在處理這個問題上，百度的確搜不到相關的信息，甚至是這樣的問題，我都不知道該如何描述清楚，以便搜索，所幸google了一下swiper slide content overflow之類關鍵詞查到了SwiperJS做者給出的答案，實在幸運，後來該頁面在優化過程當中我重寫用了DEMO-2的方案，心情也是舒暢了許多。

同時，我也查過SF，關於SwiperJS的一些相似的資料，的確也沒有找到，不知道我寫的這個是否能給相關開發的朋友帶來幫助，或者其實你們還有更好的方法，歡迎留言共同窗習探討~