移動端 h5開發相關內容總結(三)

知道和理解之間是有很大距離的。別人談到一個知識點，能接上嘴并且能發表一下自己的意見，這叫知道。遇到問題能夠想到用什么知識點解決問題，這叫理解。

display:none 關閉一個元素的顯示（對布局沒有影響）；其所有后代元素都也被會被關閉顯示。文檔渲染時，該元素如同不存在。（不會顯示在文檔流中的位置，但是 DOM 節點仍會出現在文檔流中） 

visibility:hidden visibility屬性讓你能夠控制一個圖形元素的可見性,但是仍會占用顯示時候在文檔流中的位置。

之前我的想法是這個樣子的：

1.我先觸發 qr-btn 的  click 事件，在回調中觸發  input 的 click 事件 click 事件 

2.然后觸發 input 的  change 事件,獲取上傳圖片的信息。

發生的情況是： 代碼無限次的觸發 $('.qr-btn').bind(...)   ,就出現了上面的報錯信息。那么是什么原因導致的呢？ 

思考一下發現： 是因為事件冒泡的問題。我單擊父元素觸發子元素的 click  事件，子元素的  click  事件又冒泡到父元素上，觸發父元素的  click  事件，然后父元素再次觸發了子元素的  click  事件，這就造成了事件的循環 。

嘗試阻止事件的冒泡，看能夠解決問題？

那我們嘗試在觸發子元素的 click 的時候，嘗試組織子元素的冒泡，看能否解決我的問題？添加如下的代碼：

</div>

看想一下 w3school 的示例代碼和效果：

1. <form> <label for="male">Male</label>
2. <input type="radio" name="sex" id="male" />
3. <br /> <label for="female">Female</label>
4. <input type="radio" name="sex" id="female" />
5. </form>

效果如下圖：

到這里應該之道我們該怎么改進我們的代碼了，

1. <lable class="qr-btn" node-type="qr-btn" for="qr-input">掃描二維碼1
2. <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="掃描二維碼1" />
3. </lable>

除了 lable 標簽的樣式我們自己需要自己定義外，還有兩個優點：

• 減少了 JavaScript 的書寫；
• lable  標簽和  input  標簽沒有必要是包含關系

4.“彈層盒”布局和普通盒模型布局的優缺點對比

最近做了一個抽獎的活動，其中就有一個輪盤的旋轉的動畫效果（注意啦，中間的那個卡頓是 gif 圖片又重新開始播放了）。，效果如下圖：

關于動畫實現在下一篇文章中會繼續介紹，這里主要來關注下布局的問題。因為我們頁面會在 pc 和移動移動各出一套。所以在 pc 和移動我分別用了兩種方案，pc 傳統布局實現，h5 “彈性盒”實現。

1.彈性盒實現九宮格

外圍的那些燈是使用絕對定位來做的，就不過過多的介紹，主要的是看中間的獎品九宮格的部分。html 代碼如下：

1. <div class="re-middle">
2. <div class="row-a" node-type="row-a">
3. <div>mac pro</div>
4. <div>掃地機器人</div>
5. <div>iphone6s</div>
6. </div>
7. <div class="row-b" node-type="row-b">
8. <div>20積分</div>
9. <div></div>
10. <div>優惠券</div>
11. </div>
12. <div class="row-c" node-type="row-c">
13. <div>ps4</div>
14. <div>
15. <p>猴年限定</p>公仔</div>
16. <div>祝福紅包</div>
17. </div>
18. <div node-type="reward-layer"></div>
19. </div>

css代碼如下：

1. .re-middle {
2. position: absolute;
3. width: 28.3rem;
4. height: 16rem;
5. top: 0;
6. left: 0;
7. right: 0;
8. bottom: 0;
9. margin: auto;
10. background-color: #f69f75;
11. color: #ffdece;
12. font-size: 1.8rem;
13. }
15. .row-a,
16. .row-b,
17. .row-c {
18. height: 5.3rem;
19. display: -webkit-box;
20. display: -webkit-flex;
21. display: -ms-flexbox;
22. display: flex;
23. -webkit-flex-flow: row nowrap;
24. -ms-flex-flow: row nowrap;
25. flex-flow: row nowrap;
26. }
28. .row-a div,
29. .row-b div,
30. .row-c div {
31. -webkit-box-flex: 1;
32. -webkit-flex: 1;
33. -ms-flex: 1;
34. flex: 1;
35. text-align: center;
36. line-height: 5.3rem;
37. background-color: #f69f75;
38. }

由上面的 css 代碼可以看出來我僅僅是在水平方向上使用了“彈性盒”,而在豎直的方向上，還是使用了固定高度（因為我是用的 rem 單位，這里的固定也是不準確的，高度會根據 fontsize 值進行計算。）

那么可不可以在豎直和水平都是用“彈性盒”呢？來看一下下面的css代碼：

1. .re-middle {
2. position: absolute;
3. width: 28.3rem;
4. height: 16rem;
5. top: 0;
6. left: 0;
7. right: 0;
8. bottom: 0;
9. margin: auto;
10. background-color: #f69f75;
11. display: -webkit-box;
12. display: -webkit-flex;
13. display: -ms-flexbox;
14. display: flex;
15. -webkit-box-orient: vertical;
16. -webkit-box-direction: normal;
17. -webkit-flex-direction: column;
18. -ms-flex-direction: column;
19. flex-direction: column;
20. color: #ffdece;
21. font-size: 1.8rem;
22. }
24. .row-a,
25. .row-b,
26. .row-c {
27. /*height: 5.3rem;*/
28. -webkit-box-flex: 1;
29. -webkit-flex: 1;
30. -ms-flex: 1;
31. flex: 1;
32. display: -webkit-box;
33. display: -webkit-flex;
34. display: -ms-flexbox;
35. display: flex;
36. -webkit-flex-flow: row nowrap;
37. -ms-flex-flow: row nowrap;
38. flex-flow: row nowrap;
39. }
41. .row-a div,
42. .row-b div,
43. .row-c div {
44. -webkit-box-flex: 1;
45. -webkit-flex: 1;
46. -ms-flex: 1;
47. flex: 1;
48. text-align: center;
49. line-height: 5.3rem;
50. background-color: #f69f75;
51. /*position: relative;*/
52. -webkit-box-align:center;
53. -webkit-align-items:center;
54. -ms-flex-align:center;
55. align-items:center;
56. }

周末的時候關于這個布局自己又翻書看了下“彈性盒”的文檔，終于實現了在豎直和垂直方向上都實現內容的水平垂直居中內部元素。 其實上面的代碼只需要把內容的父級元素再次定義為 display:flex 再添加兩個屬性 justify-content 和 align-items 就可以了。前者是控制彈性盒的內容垂直方向居中，后者控制內容水平方向居中。

詳細代碼如下：

1. .row-a div,
2. .row-b div,
3. .row-c div {
4. -webkit-box-flex: 1;
5. -webkit-flex: 1;
6. -ms-flex: 1;
7. flex: 1;
8. border: 1px solid #000;
9. -webkit-box-align: center;
10. -webkit-align-items: center;
11. -ms-flex-align: center;
12. align-items: center;
13. -webkit-box-pack: center;
14. -webkit-justify-content: center;
15. -ms-flex-pack: center;
16. justify-content: center;
17. display: -webkit-box;
18. display: -webkit-flex;
19. display: -ms-flexbox;
20. display: flex;
21. }

2.傳統方式實現

與 h5 端相比，我在 pc 端的實現是傳統的 浮動 方式.我的 HTML 代碼如下：

2. <div class="re-middle">
3. <div class="row-a">
4. <div>mac pro</div>
5. <div class="row-a-sec">祝福紅包</div>
6. <div class="row-a-last"> iphone 6s</div>
7. </div>
8. <div class="row-b clearfix">
9. <div>優惠券</div>
10. <div class="row-b-sec"></div>
11. <div class="row-b-last">20積分</div>
12. </div>
13. <div class="row-c">
14. <div>掃地機器人</div>
15. <div class="row-c-sec">猴年限定
16. <p>公仔</p>
17. </div>
18. <div class="row-c-last">ps4</div>
19. </div>
20. <div class="reward-btn"></div>
21. </div>

css 代碼如下：

1. .re-middle {
2. background-color: #f89f71;
3. width: 530px;
4. height: 320px;
5. position: absolute;
6. top: 0;
7. right: 0;
8. bottom: 0;
9. left: 0;
10. margin: auto;
11. }
13. .row-a,
14. .row-b,
15. .row-c {
16. /*height: 106px;*/
17. font-size: 0;
18. overflow: hidden;
19. }
21. .row-a > div,
22. .row-c > div {
23. float: left;
24. width: 176px;
25. height: 106px;
26. text-align: center;
27. }
29. .row-b div {
30. float: left;
31. width: 176px;
32. height: 106px;
33. text-align: center;
34. line-height: 106px;
35. background-color: #f69f75;
36. }

由上面的 css 代碼對比看我們可以顯然看出傳統的浮動方式的布局和“彈性盒”布局的一些優缺點：

• float 布局代碼簡潔，但是必須確定的指定盒子的寬度和高度，多屏幕的適配上會差一些（rem動態計算除外）。
• “彈性盒”布局代碼使用新的 css3屬性，需要添加額外的廠商前綴，增加了代碼的復雜度(添加廠商前綴可以使用 sublime 插件，一鍵完成，推薦我的文章  前端開發工程師的 sublime 配置 )
• “彈性盒”為多屏幕的適配提供了便利性。我不用去關心子元素的寬度和高度是多少，或者是屏幕的寬度是多少，都會根據實際請款 flex 自身會去適配。

所以這里只能考慮不使用 line-height ，使用 padding 來解決問題 ,嘗試 padding 后的效果。如下圖： 

可以看到容器的下面多出了一部分。那也是我們使用的 padding 的問題，那么怎么解決這個問題呢？這就要用到之前提到過的 box-sizing 來解決問題。

1. .row-c-sec {
2. color: #ffdece;
3. font-size: 30px;
4. padding-top: 17px;
5. background-color: #f69f75;
6. /*使容器的高=內容高度+padding +border*/
7. box-sizing: border-box;
8. }

5.按鈕多次提交的解決方案

在做“跑馬燈”插件的時候遇到了一個問題，就是用戶點擊開始抽獎按鈕以后在還沒有返回結果的時候用戶又第二次點擊抽獎按鈕，那個時候機會出現“奇葩”的問題。比如說：第一次請求和第二次請求重合返回的結果顯示哪一個，就算允許用戶進行二次抽獎，交互也不友好。而且如果前端頁面不做限制的話，顯示也會出現奇葩的問題。比如下面這樣：

這樣是不是很糟糕啊。。。

那么我是怎么解決這個問題呢？答案很簡單，我就是在點擊按鈕之后，使用絕對定位彈起了一個透明的彈層，將按鈕給覆蓋，等結果返回并顯示以后，我在同時去掉彈層。這樣就避免了用戶的重復提交。詳細看一下代碼：

1. <div node-type="cover_layer"></div>

1. .cover-layer{
2. width:100%;
3. height:100%;
4. top:0;
5. position:absolute;
6. z-index:9999;
7. }

這里保證我的這個透明的彈層能夠覆蓋在抽獎按鈕的上面。當然這個 class 是我通過 JavaScript 動態的添加和刪除的。

1. $(node).on('clcik','.reward-btn',function(){
2. //呼起彈層
3. $('[node-type=cover_layer]',node).addClass('cover-layer');
4. .....
6. //返回結果以后去掉彈層
7. $('[node-type=cover_layer]',node).removeClass('cover-layer');
8. .....
9. });

這次的分享就到這里，下一次會分享“輪盤”抽獎效果的 JavaScript 開發過程。