一個移動端 H5 專案總結
兩個月前做過幾個移動端的 H5 頁面，一些看似簡單的東西一旦動手做起來總是會出現許多各式各樣的問題，所以把這些問題記錄下來，自己沒事翻一翻，而且沒準以後別人也遇到類似的問題，就可以供別人做參考，或者有個思路去解決。
position: fixed 定位失效
需求裡要求把導航欄固定在頂部，這個也很簡單，當然就是一個position: fiexed
的事，然而到 Chrome 上調成手機模式一看，emm , 手指一滑導航欄也跟著走了，可能很多程式設計師都有過這樣的錯覺，寫程式碼寫的美滋滋，一到瀏覽器一看，理想與現實的差距啊！出現這種情況，那說明position: fiexed
沒起到作用，首先檢查了下是不是這行程式碼拼寫出了問題，發現沒有問題；接著進入瀏覽器控制檯用游標指向了這個元素，檢視它對應的 css 樣式，發現並沒有出現position: fiexed
; 於是，去 google 了一下，看了許多關於這個問題的解釋，發現這麼一句話：父級元素如果有transform屬性，會導致子元素的fixed失效。解決是父元素去掉 transform 屬性或者父元素加 display：inline;
按照這個去修改了相應的程式碼，發現還是沒效果！！！
好吧，最後，把那一個模組的程式碼全刪了重新寫，並且按上面說的確保父元素沒有 transform 之類的屬性，終於有了導航欄固定頂部的效果。
幾點啟示：
- 寫程式碼要細心在細心，注意規範，否則寫到後面很容易陷入混亂，一下子看不出哪裡出了問題，又不知從哪除錯起。
- 用好 google 或百度等搜尋引擎
- 一個良好的心態有助於你在除錯程式碼時更容易發現問題
手機端手指滑動輪播效果
簡單的圖片輪播用 js 或 jq 即可實現，需要注意的是在移動端，輪播圖需要配合手指滑動，如何能讓手指滑動的時候圖片跟著切換？去網上 search 了一下，最終採用了一個叫做hammer.js
的移動端手勢外掛，其線上 cdn 是https://cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js
, 直接用script
標籤線上引進專案檔案即可。然後需要在你自己的 js 檔案裡做如下設定：
$(function(){
var myElement= document.getElementById('輪播 div 的 id 名稱');
// 例項化
var hm = new Hammer(myElement);
// 監聽 swipeleft 和 swiperight 事件，使手指向左向右滑動切換
hm.on("swipeleft",function(){
$('# id 名稱').carousel('next');
})
hm.on("swiperight",function(){
$('# id 名稱').carousel('prev');
})
});
這樣，在手機端你就可以通過手指滑動來實現圖片輪播了。
佈局錯位
通常一個移動端的 H5 頁面都有一些常見的佈局，比如一行顯示兩個，連續幾行鋪排下去，又或是左邊圖片右邊文字這樣幾行的佈局。這些用 flex 佈局或者用 bootstrap 的柵格佈局一下子就搞定。問題出現在用了 bootstrap 的柵格佈局後，剛開始挺好，等回過頭看的時候發現佈局亂了，原先一行顯示兩張圖片，突然有一張被擠了下來。這無非就幾種情況，要麼某一個 div 的寬度過大撐起來，將旁邊的擠了下來；要麼就是 padding 或 margin 等邊距問題，仔細排查下應該就能發現問題。再者，如果是電商，有分頁功能，某一頁出現了問題調好了，另外一頁又變亂了，這時候就應該從全域性去看整個模組的程式碼去分析了，在使用 bootstrap 的 UI 元件時可以讀下相關的文字說明，結合實際情況分析改進，就可以避免一些衝突。
label 標籤模擬單選、複選框
為了讓按鈕看起來更美觀，提升使用者體驗，現在通常不直接用input
標籤的單選、複選按鈕，而是用label
標籤結合for
屬性來模擬。具體程式碼如下：
HTML程式碼 <div class="test"> <input type="checkbox" id="serach-moible"> <label for="serach-moible">蘋果</label> </div>
CSS 程式碼
.test input{ opacity: 0; }
label{
display: block;
font-size: 14px;
line-height: 14px;
}
input[type=checkbox]+label::before{
content: '';
background: transparent;
border: 1px solid #000;
box-shadow: inset 0 0 0 2px #fff;
cursor: pointer;
display: inline-block;
width: 12px;
height: 12px;
margin-right: 12px;
position: relative;
top: 2px;
}
input[type=checkbox]:checked+label::before{
background: #000;
}
程式碼執行起來是什麼樣子，你可以自己跑一下看看。模擬的過程就是先將原先的input
標籤隱藏，把按鈕的樣式新增在label
標籤上，當你點選 label 時，實際上就是選中了 input 單選按鈕，為了這樣，你必須要把 input 標籤的 id 的值跟 label 標籤的 for 屬性值保持一致，這樣就能通過操作 label 來操作按鈕。
總結
不管學什麼知識，實踐是檢驗效果的唯一標準，多動手多實踐，哪怕在簡單的東西也要親自去敲一遍程式碼才能有所瞭解，養成良好的編碼習慣，有問題藉助搜尋引擎，不要死盯在一個點上，保持好心態繼續做下去，可能哪個瞬間就把問題解決了。
本文完。