移动端?h5开发相关内容总结(三)

pasckr

                                                   

(点击上方公众号，可快速关注)

来源：zhiqiang21（@天空中的那一抹儿蓝）

网址：http://blog.csdn.net/yisuowushinian/article/details/50614699

之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。


给大家分享一下这半年来的感受吧：

知道和理解之间是有很大距离的。别人谈到一个知识点，能接上嘴并且能发表一下自己的意见，这叫知道。遇到问题能够想到用什么知识点解决问题，这叫理解。

所以有很多知识点自己确实在书上都看到过但是在平时遇到问题的时候却不知道怎么去用或者说想到去用，有时候会有同事给一下指导说用什么解决问题。关键时候还是多看（看书，看别人的代码）和多用。


1.display:none; 和 visibility:hidden;的区别


display:none 关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。（不会显示在文档流中的位置，但是 DOM 节点仍会出现在文档流中）
visibility:hidden visibility属性让你能够控制一个图形元素的可见性,但是仍会占用显示时候在文档流中的位置。


使用 display:none 的时候虽然元素不会显示，但是DOM 节点仍会出现，所以我们就可以使用选择器对该元素进行操作。如下图中的示例：





2.事件冒泡引发的问题


这个问题是发生在自己上篇文章《h5端呼起摄像头扫描二维码并解析》中的。详细的代码可以看那篇文章。


问题发生的场景


先看一段html 代码：

<div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;qr-btn&quot;[color=#006FE0 !important] [color=teal !important]node-type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;qr-btn&quot;>扫描二维码1
            <input [color=teal !important]node-type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;jsbridge&quot;[color=#006FE0 !important] [color=teal !important]type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;file&quot;[color=#006FE0 !important] [color=teal !important]name[color=#006FE0 !important]=[color=#DD1144 !important]&quot;myPhoto&quot;[color=#006FE0 !important] [color=teal !important]value[color=#006FE0 !important]=[color=#DD1144 !important]&quot;扫描二维码1&quot; />
</div>

之前我的想法是这个样子的：
1.我先触发qr-btn的 click 事件，在回调中触发 input 的click 事件click 事件
2.然后触发input 的 change 事件,获取上传图片的信息。


按照我的思路代码应该是下面的这个样子的

[color=#999999 !important]//点击父级元素的事件
[color=#006FE0 !important]    [color=#333333 !important]$([color=#DD1144 !important]&#39;.qr-btn&#39;[color=#333333 !important]).[color=teal !important]bind[color=#333333 !important]([color=#DD1144 !important]&#39;click&#39;[color=#333333 !important],[color=#800080 !important]function[color=#333333 !important](){
[color=#006FE0 !important]        [color=#999999 !important]//触发子元素的事件
[color=#006FE0 !important]        [color=#333333 !important]$([color=#DD1144 !important]&#39;[node-type=jsbridge]&#39;[color=#333333 !important]).[color=teal !important]trigger[color=#333333 !important]([color=#DD1144 !important]&quot;click&quot;[color=#333333 !important]);
[color=#006FE0 !important]    [color=#333333 !important]});
[color=#006FE0 !important]    [color=#333333 !important]$([color=#DD1144 !important]&#39;[node-type=jsbridge]&#39;[color=#333333 !important]).[color=teal !important]bind[color=#333333 !important]([color=#DD1144 !important]&#39;change&#39;[color=#333333 !important],[color=#800080 !important]function[color=#333333 !important](){
[color=#006FE0 !important]        [color=#999999 !important]//做一些事情
[color=#006FE0 !important]    [color=#333333 !important]});

上面的代码，按照正常的思路应该是没有问题的，但是，在实际的运行过程中却发生了问题。浏览器的报错信息如下：

这是因为堆栈溢出的问题。那么为什么会出现这样的问题呢？我把断点打在了以下的位置，然后点击子元素

发生的情况是：代码无限次的触发$(&#39;.qr-btn&#39;).bind(...) ,就出现了上面的报错信息。那么是什么原因导致的呢？
思考一下发现：是因为事件冒泡的问题。我单击父元素触发子元素的click 事件，子元素的 click 事件又冒泡到父元素上，触发父元素的 click 事件，然后父元素再次触发了子元素的 click 事件，这就造成了事件的循环。


问题解决办法：


尝试阻止事件的冒泡，看能够解决问题？
那我们尝试在触发子元素的click的时候，尝试组织子元素的冒泡，看能否解决我的问题？添加如下的代码：

[color=#333333 !important]$([color=#DD1144 !important]&#39;[node-type=jsbridge]&#39;[color=#333333 !important]).[color=teal !important]bind[color=#333333 !important]([color=#DD1144 !important]&#39;click&#39;[color=#333333 !important],[color=#800080 !important]function[color=#333333 !important]([color=#002D7A !important]e[color=#333333 !important]){
[color=#006FE0 !important]      [color=#999999 !important]// console.log(e.type);
[color=#006FE0 !important]       [color=#002D7A !important]e[color=#333333 !important].[color=teal !important]stopPropagation[color=#333333 !important]();
[color=#006FE0 !important] [color=#333333 !important]})

经过我的测试，代码是能够正常的运行的。


那么我们有没有更好的方法来解决上面的问题呢？请看接下来的内容


3.lable标签的 for 属性


先来看 lable 标签的定义:

标签为input元素定义标注（标记）。
label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的for属性应当与相关元素的 id 属性相同。

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

<form>  <label [color=teal !important]for[color=#006FE0 !important]=[color=#DD1144 !important]&quot;male&quot;>Male</label>
<input [color=teal !important]type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;radio&quot;[color=#006FE0 !important] [color=teal !important]name[color=#006FE0 !important]=[color=#DD1144 !important]&quot;sex&quot;[color=#006FE0 !important] [color=teal !important]id[color=#006FE0 !important]=[color=#DD1144 !important]&quot;male&quot; />
<br />  <label [color=teal !important]for[color=#006FE0 !important]=[color=#DD1144 !important]&quot;female&quot;>Female</label>
<input [color=teal !important]type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;radio&quot;[color=#006FE0 !important] [color=teal !important]name[color=#006FE0 !important]=[color=#DD1144 !important]&quot;sex&quot;[color=#006FE0 !important] [color=teal !important]id[color=#006FE0 !important]=[color=#DD1144 !important]&quot;female&quot; />
</form>

效果如下图：

到这里应该之道我们该怎么改进我们的代码了，

<lable [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;qr-btn&quot;[color=#006FE0 !important] [color=teal !important]node-type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;qr-btn&quot;[color=#006FE0 !important] [color=teal !important]for[color=#006FE0 !important]=[color=#DD1144 !important]&quot;qr-input&quot;>扫描二维码1
        <input [color=teal !important]node-type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;jsbridge&quot;[color=#006FE0 !important] [color=teal !important]id[color=#006FE0 !important]=[color=#DD1144 !important]&quot;qr-input&quot;[color=#006FE0 !important] [color=teal !important]type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;file&quot;[color=#006FE0 !important] [color=teal !important]name[color=#006FE0 !important]=[color=#DD1144 !important]&quot;myPhoto&quot;[color=#006FE0 !important] [color=teal !important]value[color=#006FE0 !important]=[color=#DD1144 !important]&quot;扫描二维码1&quot; />
</lable>

除了 lable 标签的样式我们自己需要自己定义外，还有两个优点：

• 减少了 JavaScript 的书写；
  
• lable 标签和 input 标签没有必要是包含关系
  

4.“弹层盒”布局和普通盒模型布局的优缺点对比


最近做了一个抽奖的活动，其中就有一个轮盘的旋转的动画效果（注意啦，中间的那个卡顿是 gif 图片又重新开始播放了）。，效果如下图：

关于动画实现在下一篇文章中会继续介绍，这里主要来关注下布局的问题。因为我们页面会在 pc 和移动移动各出一套。所以在 pc 和移动我分别用了两种方案，pc 传统布局实现，h5 “弹性盒”实现。


1.弹性盒实现九宫格


外围的那些灯是使用绝对定位来做的，就不过过多的介绍，主要的是看中间的奖品九宫格的部分。html 代码如下：

<div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;re-middle&quot;>
    <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-a&quot;[color=#006FE0 !important] [color=teal !important]node-type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-a&quot;>
        <div>mac pro</div>
        <div>扫地机器人</div>
        <div>iphone6s</div>
    </div>
    <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-b&quot;[color=#006FE0 !important] [color=teal !important]node-type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-b&quot;>
        <div>20积分</div>
        <div></div>
        <div>优惠券</div>
    </div>
    <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-c&quot;[color=#006FE0 !important] [color=teal !important]node-type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-c&quot;>
        <div>ps4</div>
        <div>
            <p>猴年限定</p>公仔</div>
        <div>祝福红包</div>
    </div>
    <div [color=teal !important]node-type[color=#006FE0 !important]=[color=#DD1144 !important]&quot;reward-layer&quot;></div>
</div>

css代码如下：

[color=teal !important].re-middle [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]position[color=#333333 !important]:[color=#006FE0 !important] absolute[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]width[color=#333333 !important]:[color=#006FE0 !important] 28.3rem[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]height[color=#333333 !important]:[color=#006FE0 !important] 16rem[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]top[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]left[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]right[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]bottom[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]margin[color=#333333 !important]:[color=#006FE0 !important] auto[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]background-color[color=#333333 !important]:[color=#006FE0 !important] #f69f75[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]color[color=#333333 !important]:[color=#006FE0 !important] #ffdece[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]font-size[color=#333333 !important]:[color=#006FE0 !important] 1.8rem[color=#333333 !important];
[color=#333333 !important]}
[color=teal !important].row-a,
[color=teal !important].row-b,
[color=teal !important].row-c [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]height[color=#333333 !important]:[color=#006FE0 !important] 5.3rem[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -webkit-box[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -webkit-flex[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -ms-flexbox[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] flex[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-flex-flow[color=#333333 !important]:[color=#006FE0 !important] row[color=#006FE0 !important] nowrap[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex-flow[color=#333333 !important]:[color=#006FE0 !important] row[color=#006FE0 !important] nowrap[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]flex-flow[color=#333333 !important]:[color=#006FE0 !important] row[color=#006FE0 !important] nowrap[color=#333333 !important];
[color=#333333 !important]}
[color=teal !important].row-a div,
[color=teal !important].row-b div,
[color=teal !important].row-c div [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]-webkit-box-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]text-align[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]line-height[color=#333333 !important]:[color=#006FE0 !important] 5.3rem[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]background-color[color=#333333 !important]:[color=#006FE0 !important] #f69f75[color=#333333 !important];
[color=#333333 !important]}

由上面的 css 代码可以看出来我仅仅是在水平方向上使用了“弹性盒”,而在竖直的方向上，还是使用了固定高度（因为我是用的 rem 单位，这里的固定也是不准确的，高度会根据 fontsize 值进行计算。）


那么可不可以在竖直和水平都是用“弹性盒”呢？
来看一下下面的css代码：

[color=teal !important].re-middle [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]position[color=#333333 !important]:[color=#006FE0 !important] absolute[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]width[color=#333333 !important]:[color=#006FE0 !important] 28.3rem[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]height[color=#333333 !important]:[color=#006FE0 !important] 16rem[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]top[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]left[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]right[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]bottom[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]margin[color=#333333 !important]:[color=#006FE0 !important] auto[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]background-color[color=#333333 !important]:[color=#006FE0 !important] #f69f75[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -webkit-box[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -webkit-flex[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -ms-flexbox[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] flex[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-box-orient[color=#333333 !important]:[color=#006FE0 !important] vertical[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-box-direction[color=#333333 !important]:[color=#006FE0 !important] normal[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-flex-direction[color=#333333 !important]:[color=#006FE0 !important] column[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex-direction[color=#333333 !important]:[color=#006FE0 !important] column[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]flex-direction[color=#333333 !important]:[color=#006FE0 !important] column[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]color[color=#333333 !important]:[color=#006FE0 !important] #ffdece[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]font-size[color=#333333 !important]:[color=#006FE0 !important] 1.8rem[color=#333333 !important];
[color=#333333 !important]}
[color=teal !important].row-a,
[color=teal !important].row-b,
[color=teal !important].row-c [color=#333333 !important]{
[color=#006FE0 !important]    [color=#999999 !important]/*height: 5.3rem;*/
[color=#006FE0 !important]    [color=teal !important]-webkit-box-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -webkit-box[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -webkit-flex[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -ms-flexbox[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] flex[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-flex-flow[color=#333333 !important]:[color=#006FE0 !important] row[color=#006FE0 !important] nowrap[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex-flow[color=#333333 !important]:[color=#006FE0 !important] row[color=#006FE0 !important] nowrap[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]flex-flow[color=#333333 !important]:[color=#006FE0 !important] row[color=#006FE0 !important] nowrap[color=#333333 !important];
[color=#333333 !important]}
[color=teal !important].row-a div,
[color=teal !important].row-b div,
[color=teal !important].row-c div [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]-webkit-box-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]text-align[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]line-height[color=#333333 !important]:[color=#006FE0 !important] 5.3rem[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]background-color[color=#333333 !important]:[color=#006FE0 !important] #f69f75[color=#333333 !important];
[color=#006FE0 !important]    [color=#999999 !important]/*position: relative;*/
[color=#006FE0 !important]    [color=teal !important]-webkit-box-align[color=#333333 !important]:center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-align-items[color=#333333 !important]:center[color=#333333 !important];
[color=#006FE0 !important]        [color=teal !important]-ms-flex-align[color=#333333 !important]:center[color=#333333 !important];
[color=#006FE0 !important]            [color=teal !important]align-items[color=#333333 !important]:center[color=#333333 !important];
[color=#333333 !important]}

周末的时候关于这个布局自己又翻书看了下“弹性盒”的文档，终于实现了在竖直和垂直方向上都实现内容的水平垂直居中内部元素。其实上面的代码只需要把内容的父级元素再次定义为display:flex再添加两个属性justify-content和align-items就可以了。前者是控制弹性盒的内容垂直方向居中，后者控制内容水平方向居中。


详细代码如下：

[color=teal !important].row-a div,
[color=teal !important].row-b div,
[color=teal !important].row-c div [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]-webkit-box-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]flex[color=#333333 !important]:[color=#006FE0 !important] 1[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]border[color=#333333 !important]:[color=#006FE0 !important] 1px[color=#006FE0 !important] solid[color=#006FE0 !important] #000[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-box-align[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-align-items[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex-align[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]align-items[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-box-pack[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-webkit-justify-content[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]-ms-flex-pack[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]justify-content[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -webkit-box[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -webkit-flex[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] -ms-flexbox[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]display[color=#333333 !important]:[color=#006FE0 !important] flex[color=#333333 !important];
[color=#333333 !important]}

2.传统方式实现


与 h5 端相比，我在 pc 端的实现是传统的浮动方式.我的 HTML 代码如下：

<div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;re-middle&quot;>
    <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-a&quot;>
        <div>mac pro</div>
        <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-a-sec&quot;>祝福红包</div>
        <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-a-last&quot;> iphone 6s</div>
    </div>
    <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-b clearfix&quot;>
        <div>优惠券</div>
        <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-b-sec&quot;></div>
        <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-b-last&quot;>20积分</div>
    </div>
    <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-c&quot;>
        <div>扫地机器人</div>
        <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-c-sec&quot;>猴年限定
            <p>公仔</p>
        </div>
        <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;row-c-last&quot;>ps4</div>
    </div>
    <div [color=teal !important]class[color=#006FE0 !important]=[color=#DD1144 !important]&quot;reward-btn&quot;></div>
</div>

css 代码如下：

[color=teal !important].re-middle [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]background-color[color=#333333 !important]:[color=#006FE0 !important] #f89f71[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]width[color=#333333 !important]:[color=#006FE0 !important] 530px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]height[color=#333333 !important]:[color=#006FE0 !important] 320px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]position[color=#333333 !important]:[color=#006FE0 !important] absolute[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]top[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]right[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]bottom[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]left[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]margin[color=#333333 !important]:[color=#006FE0 !important] auto[color=#333333 !important];
[color=#333333 !important]}
[color=teal !important].row-a,
[color=teal !important].row-b,
[color=teal !important].row-c [color=#333333 !important]{
[color=#006FE0 !important]    [color=#999999 !important]/*height: 106px;*/
[color=#006FE0 !important]    [color=teal !important]font-size[color=#333333 !important]:[color=#006FE0 !important] 0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]overflow[color=#333333 !important]:[color=#006FE0 !important] hidden[color=#333333 !important];
[color=#333333 !important]}
[color=teal !important].row-a > div,
[color=teal !important].row-c > div [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]float[color=#333333 !important]:[color=#006FE0 !important] left[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]width[color=#333333 !important]:[color=#006FE0 !important] 176px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]height[color=#333333 !important]:[color=#006FE0 !important] 106px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]text-align[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#333333 !important]}
[color=teal !important].row-b div [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]float[color=#333333 !important]:[color=#006FE0 !important] left[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]width[color=#333333 !important]:[color=#006FE0 !important] 176px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]height[color=#333333 !important]:[color=#006FE0 !important] 106px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]text-align[color=#333333 !important]:[color=#006FE0 !important] center[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]line-height[color=#333333 !important]:[color=#006FE0 !important] 106px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]background-color[color=#333333 !important]:[color=#006FE0 !important] #f69f75[color=#333333 !important];
[color=#333333 !important]}

由上面的 css 代码对比看我们可以显然看出传统的浮动方式的布局和“弹性盒”布局的一些优缺点：

• float布局代码简洁，但是必须确定的指定盒子的宽度和高度，多屏幕的适配上会差一些（rem动态计算除外）。
  
• “弹性盒”布局代码使用新的 css3属性，需要添加额外的厂商前缀，增加了代码的复杂度(添加厂商前缀可以使用 sublime 插件，一键完成，推荐我的文章 前端开发工程师的 sublime 配置)
  
• “弹性盒”为多屏幕的适配提供了便利性。我不用去关心子元素的宽度和高度是多少，或者是屏幕的宽度是多少，都会根据实际请款flex自身会去适配。
  

遇到的一个小问题，多行文本的处置居中：
这个九宫格内的文本元素，如果只是单行的话，只要使用 line-height 就可以解决问题，但是如果多行呢？会出什么情况呢，看下图：

所以这里只能考虑不使用line-height，使用padding 来解决问题 ,尝试padding后的效果。如下图：

可以看到容器的下面多出了一部分。那也是我们使用的padding的问题，那么怎么解决这个问题呢？这就要用到之前提到过的box-sizing来解决问题。

[color=teal !important].row-c-sec [color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]color[color=#333333 !important]:[color=#006FE0 !important] #ffdece[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]font-size[color=#333333 !important]:[color=#006FE0 !important] 30px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]padding-top[color=#333333 !important]:[color=#006FE0 !important] 17px[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]background-color[color=#333333 !important]:[color=#006FE0 !important] #f69f75[color=#333333 !important];
[color=#006FE0 !important]    [color=#999999 !important]/*使容器的高=内容高度+padding +border*/
[color=#006FE0 !important]    [color=teal !important]box-sizing[color=#333333 !important]:[color=#006FE0 !important] border-box[color=#333333 !important];
[color=#333333 !important]}

5.按钮多次提交的解决方案


在做“跑马灯”插件的时候遇到了一个问题，就是用户点击开始抽奖按钮以后在还没有返回结果的时候用户又第二次点击抽奖按钮，那个时候机会出现“奇葩”的问题。比如说：第一次请求和第二次请求重合返回的结果显示哪一个，就算允许用户进行二次抽奖，交互也不友好。而且如果前端页面不做限制的话，显示也会出现奇葩的问题。比如下面这样：

这样是不是很糟糕啊。。。


那么我是怎么解决这个问题呢？
答案很简单，我就是在点击按钮之后，使用绝对定位弹起了一个透明的弹层，将按钮给覆盖，等结果返回并显示以后，我在同时去掉弹层。这样就避免了用户的重复提交。详细看一下代码：

<div node-type=&quot;cover_layer&quot;></div>

[color=teal !important]cover-layer[color=#333333 !important]{
[color=#006FE0 !important]    [color=teal !important]width[color=#333333 !important]:100%[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]height[color=#333333 !important]:100%[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]top[color=#333333 !important]:0[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]position[color=#333333 !important]:absolute[color=#333333 !important];
[color=#006FE0 !important]    [color=teal !important]z-index[color=#333333 !important]:9999[color=#333333 !important];
[color=#333333 !important]}

这里保证我的这个透明的弹层能够覆盖在抽奖按钮的上面。当然这个class 是我通过JavaScript动态的添加和删除的。

[color=#333333 !important]$([color=#002D7A !important]node[color=#333333 !important]).[color=teal !important]on[color=#333333 !important]([color=#DD1144 !important]&#39;clcik&#39;[color=#333333 !important],[color=#DD1144 !important]&#39;.reward-btn&#39;[color=#333333 !important],[color=#800080 !important]function[color=#333333 !important](){
[color=#006FE0 !important]    [color=#999999 !important]//呼起弹层
[color=#006FE0 !important]    [color=#333333 !important]$([color=#DD1144 !important]&#39;[node-type=cover_layer]&#39;[color=#333333 !important],[color=#002D7A !important]node[color=#333333 !important]).[color=teal !important]addClass[color=#333333 !important]([color=#DD1144 !important]&#39;cover-layer&#39;[color=#333333 !important]);
[color=#006FE0 !important]    [color=#333333 !important].....
[color=#006FE0 !important]    [color=#999999 !important]//返回结果以后去掉弹层
[color=#006FE0 !important]    [color=#333333 !important]$([color=#DD1144 !important]&#39;[node-type=cover_layer]&#39;[color=#333333 !important],[color=#002D7A !important]node[color=#333333 !important]).[color=teal !important]removeClass[color=#333333 !important]([color=#DD1144 !important]&#39;cover-layer&#39;[color=#333333 !important]);
[color=#006FE0 !important]    [color=#333333 !important].....
});

这次的分享就到这里，下一次会分享“轮盘”抽奖效果的 JavaScript 开发过程。

【今日微信公号推荐↓】