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

by admin on 2019年12月16日

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

2017/02/06 · HTML5 · 1
评论 ·
移动端

本文作者: 伯乐在线 –
zhiqiang21
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

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

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

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

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

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

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

2016/02/01 · HTML5 · 3
评论 ·
移动端

本文作者: 伯乐在线 –
zhiqiang21
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

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

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

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

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

1.移动端开发视窗口的添加

h5端开发下面这段话是必须配置的

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

 

其它相关配置内容如下:

  • width viewport 宽度(数值/device-width)
  • height viewport 高度(数值/device-height)
  • initial-scale 初始缩放比例
  • maximum-scale 最大缩放比例
  • minimum-scale 最小缩放比例
  • user-scalable 是否允许用户缩放(yes/no)
  • minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8
    中已经删除),可以在页面加载时最小化上下状态栏。

移动端 h5 开发相关内容总结:JavaScript 篇

2016/01/24 · HTML5,
JavaScript · 5
评论 ·
移动端

本文作者: 伯乐在线 –
zhiqiang21
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

前言:

看了下博客的更新时间,发现9月份一篇也没有更新。一直想着都要抽时间写一篇的,不然今年的更新记录就会断在了9月份。但是还是应为各种各样的事情给耽搁了。当内心突然涌起一股必须写点什么的时候,突然发现自己把写博客的“套路”都忘了。(●´ω`●)φ

一直认为自己还是一个比较热爱思考的人。最近一直在思考两个问题:

  1. 自己做技术的初衷;
  2. 自己的技术成长之路;

当然这两篇文章自己也在润色之中,相信很快会跟大家见面。

废话不多说。来正菜。

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

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

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

图片 1

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

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

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

图片 2

2.媒体查询的改进

之前在做移动端开发的时候,为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。 
比如下面的 媒体查询代码

html {
    //iphone5
    font-size: 62.5%;
}
@media (max-width: 414px) {
    html {
        //iphone6+
        font-size: 80.85%;
    }
}
@media (max-width: 375px) {
    html {
        //iphone6
        font-size: 73.24%;
    }
}

 

这样做的结果,有两个很明显的缺点

  • 适配屏幕的尺寸不是连续的。
  • 在自己的 css 文件中添加大段的这样查询代码。增加了 css
    文件的体积。

后来参考淘宝移动端页面适配规则,使用 js
获取客户端的宽度,根据设计稿的原型动态的计算font-size 的值。

详细的内容请看这里 根据iPhone6设计稿动态计算rem值

1.改变页面标题的内容

有时候我们开发 h5页面的时候需要动态的去更新title 的名字,这个时候使用

JavaScript

document.title=’修改后的名字’;

1
    document.title=’修改后的名字’;

就可以解决我们的问题。

或者使用

JavaScript

//当前firefox对 title 参数不支持 history.pushstate(state,title,url);

1
2
    //当前firefox对 title 参数不支持
    history.pushstate(state,title,url);

这种方法不仅能够修改 title 而且能够修改 url
的值,并且将这些信息存储到浏览器的历史堆栈中,当用户使用返回按钮的时候能够得到更加好的体验。
当我们在做一个无刷新更新页面数据的时候,可以使用这种方法来记录页面的状态,使得页面能够回退。

1.背景色与透明度相关知识

好吧。至从自己到了新的工作环境以后,开发环境又从只需要兼容 IE8
以上回到了必须兼容 IE6
浏览器上来。所以在第一次做项目的时候,还是遇到一些兼容低版本IE浏览器的问题。

首先来看一个背景透明的问题,背景透明有三种解决方案:

  1. IE6-7使用滤镜;
  2. opcity;
  3. rgba;

但是他们也有些细微的差别总结如下:

图片 3

示例效果如下(如果可以的话,自己可以写一个简单的demo看下效果):

第一个是opcity和rgab的区别

图片 4

第二张是在ie6中的效果:

图片 5

当我们在兼容低版本浏览器的时候可能下面的写法可以满足我们的需求(两个属性都写上,浏览器识别的属性直接覆盖前者的属性):

CSS

.item1{ opacity:0.1;//IE8以上浏览器识别 filter:
progid:DXImageTransform.Microsoft.Alpha(opacity=70);//滤镜低版本IE7-8支持
}

1
2
3
4
.item1{
    opacity:0.1;//IE8以上浏览器识别
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);//滤镜低版本IE7-8支持
}

2.事件冒泡引发的问题

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

2.事件冒泡引发的问题

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

3.a标签内容语义化

大多数时候我们都会给一片区域加上点击跳转的功能。如下图:

图片 6

很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素,是没有宽和高的。不能够把容器撑开。 
一种解决办法就是给a 标签设置block 属性。如下:

<style>
    a{display:block;}
</style>

<a>
    <div></div>
</a>

功能上已经没有问题。但是在语义化的层面上,上面的代码是不标准的。

最好的做法就是做如下的修改,这样不会使自己的 html 代码显的太突兀:

<style>
 a{display:block;}
 span{dispaly:block;}
</style>

<a>



</a>

2.日志记录同步发送请求

有这样的一个场景:
在做电商类的产品的时候,我们要对每个产品的点击数进行统计(其实就是出发一个ajax请求)。PC端的交互大多数是点击商品后新开页面。这个时候ajax同步发送或者异步发送对统计没有影响。
但是嵌套在客户端中,长长是在当前 tab
中跳页。如果我们仍旧使用异步的ajax
请求,有请求会被阻断,统计结果不准确。

2. html5标签呼起系统发件箱

做html5开发的过程中,我们可能会有这样的需求:

点击按钮,呼起系统的发送短信的窗口,并且自动填充发送到的号码和内容;

网络上可以很容易的找到这方面的demo
,并且也可以找到在安卓上和ios上是有却别的:

XHTML

<!– ios–> <a
href=”sms:10086&body=发送的内容”>点击我发送短信</a> <!–
android–> <a
href=”sms:10086?body=发送的内容”>点击我发送短信</a>

1
2
3
4
<!– ios–>
<a href="sms:10086&body=发送的内容">点击我发送短信</a>
<!– android–>
<a href="sms:10086?body=发送的内容">点击我发送短信</a>

但是在实际的开发过程中却遇到了很多坑。主要原因是:
除了安卓和IOS系统的写法不同外,ios不同系统版本写法也不同。而且在不同的app中也有不同。

上面的原因是在生产环境遇到的问题。刚开始因为找不到相关可以查阅的文档只能不做兼容。偶然一次在
stackoverflow 发现了问题的原因。

原文内容如下:

图片 7

翻译后总结如下:

图片 8

所以,如果在生产环境中有呼起系统发件箱并且填充号码和内容的请注意以上的区别。

问题发生的场景

先看一段html 代码:

  1. 扫描二维码1
  2.  

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

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

  1. //点击父级元素的事件
  2. $('.qr-btn').bind('click',function(){
  3. //触发子元素的事件
  4. $('[node-type=jsbridge]').trigger("click");
  5. });
  6. $('[node-type=jsbridge]').bind('change',function(){
  7. //做一些事情
  8. });

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

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

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

问题发生的场景

先看一段html 代码:

XHTML

<div class=”qr-btn” node-type=”qr-btn”>扫描二维码1 <input
node-type=”jsbridge” type=”file” name=”myPhoto” value=”扫描二维码1″
/> </div>

1
2
3
<div class="qr-btn" node-type="qr-btn">扫描二维码1
            <input node-type="jsbridge" type="file" name="myPhoto" value="扫描二维码1" />
</div>

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

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

JavaScript

//点击父级元素的事件 $(‘.qr-btn’).bind(‘click’,function(){
//触发子元素的事件 $(‘[node-type=jsbridge]’).trigger(“click”); });
$(‘[node-type=jsbridge]’).bind(‘change’,function(){ //做一些事情 });

1
2
3
4
5
6
7
8
//点击父级元素的事件
    $(‘.qr-btn’).bind(‘click’,function(){
        //触发子元素的事件
        $(‘[node-type=jsbridge]’).trigger("click");
    });
    $(‘[node-type=jsbridge]’).bind(‘change’,function(){
        //做一些事情
    });

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

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

图片 12

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

4.为自己的页面设置最大宽度和最小宽度

如果我们使用的是rem 单位,使用 js 动态计算font-size 值的话,我们可以无限适配最大和最小的终端屏幕。但是当用户的屏幕超过一定的尺寸以后还继续显示h5页面的话对用户会很不友好。 
我们参看下京东和淘宝的h5 页面

图片 13 
图片 14

我们看到了都是定义了页面的最大和最小宽度。这样在屏幕超过一定的尺寸以后可以更友好的展示(当然这不是必须的)。

我给自己的产品页面定义的最大的宽度和最小宽度分别是:

{
    max-width:640px;
    min-width:320px;
}

3.JavaScript 中 this 相关

这部分内容之前也是看过很多次,但是都不能够理解深层次的含义。后来看的多了,也就理解了。

JavaScript

var ab = { ‘a’: 1, ‘b’: 2, ‘c’: 3, abc:function(){ //
对象的方法中,this是绑定的当前对象 var that=this; console.log(‘abc’);
var aaa=function(){ //that指向的是当前对象 console.log(that.a);
//函数中this的值绑定的是全局的window对象 console.log(this); }; aaa(); }
}; console.log(‘———‘); ab.abc();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var ab = {
    ‘a’: 1,
    ‘b’: 2,
    ‘c’: 3,
    abc:function(){
        // 对象的方法中,this是绑定的当前对象
        var that=this;
 
        console.log(‘abc’);
        var aaa=function(){
            //that指向的是当前对象
            console.log(that.a);
            //函数中this的值绑定的是全局的window对象
            console.log(this);
        };
 
        aaa();
    }
};
console.log(‘———‘);
ab.abc();

以上代码浏览器中输出结果如下:

图片 15

JavaScript

var BBB=function(){ var a=0; this.b=1; return this; } var bb= new BBB();

1
2
3
4
5
6
7
    var BBB=function(){
        var a=0;
        this.b=1;
        return this;
    }
 
    var bb= new BBB();

在浏览器中输入一下的内容查看输出:

图片 16

我们对代码做一下修改,如下:

JavaScript

var BBB=function(){ var a=0; this.b=1; } var bb= new BBB();

1
2
3
4
5
6
    var BBB=function(){
        var a=0;
        this.b=1;
    }
 
    var bb= new BBB();

与之上相同的输入,查看一下输出是什么

图片 17

由上可知 new 操作符的执行过程:

  1. 一个新对象被创建。它继承自BBB.prototype
  2. 构造函数 BBB
    被执行。执行的时候,相应的传参会被传入,同时上下文this会被指定为这个新实例。new BBB
    等同于new BBB(), 只能用在不传递任何参数的情况。
  3. 如果构造函数返回了一个“对象”,那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象。

    一般情况下构造函数不返回任何值,不过用户如果想覆盖这个返回值,可以自己选择返回一个普通对象来覆盖。当然,返回数组也会覆盖,因为数组也是对象。

3.input标签选择系统文件的问题

在html5中
input标签提供给了开发者访问系统文件的能力。说实话如果仅仅在移动端的系统浏览器中使用input控件真的没有发现什么问题。但是在app的**webview**中却处处是坑。以下是总结出的一些经验。

<input type="file">在webview中访问系统文件遇到的一些问题:

  1. 触发input后,页面“闪退”(现象就是,文件选择框出现后又立马关闭);当初遇到这个问题是在贴吧的客户端中,听贴吧的兄弟说,他们后来做了兼容。
  2. 华为手机中可以正常的呼起系统选择文件的窗口,但是无法正常读取系统文件(最后跟客户端的同学确定,如果h5在webview中读取系统文件,是需要权限的,也就是说需要客户端支持);
  3. 在ios的webview中也会出现问题。如果有兴趣的同学可以参考这篇苹果的开发者文档(点击访问)

详细的可以参考这篇文章一起阅读:《h5端呼起摄像头扫描二维码并解析》

问题解决办法:

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

  1. $('[node-type=jsbridge]').bind('click',function(e){
  2. // console.log(e.type);
  3. e.stopPropagation();
  4. });

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

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

问题解决办法:

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

JavaScript

$(‘[node-type=jsbridge]’).bind(‘click’,function(e){ //
console.log(e.type); e.stopPropagation(); });

1
2
3
4
$(‘[node-type=jsbridge]’).bind(‘click’,function(e){
      // console.log(e.type);
       e.stopPropagation();
});

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

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

5.去掉 a,input 在移动端浏览器中的默认样式

4.JavaScript 中闭包相关

定义在闭包中的函数可以“记忆”它创建时候的环境。

JavaScript

var test=function(string){ return function(){ console.log(string); } };
var tt=test(); tt();

1
2
3
4
5
6
7
var test=function(string){
    return function(){
        console.log(string);
    }
};
var tt=test();
tt();

JavaScript

//li列表点击每一行 显示当前的行数 var add_li_event=function(node){ var
helper=function(i){ return function(e){ alert(i); } }; for (var i = 0,
len =node.length; i < len; i++) { node[i].onclick=helper(i); } };

1
2
3
4
5
6
7
8
9
10
11
12
//li列表点击每一行 显示当前的行数
var add_li_event=function(node){
    var helper=function(i){
        return function(e){
            alert(i);
        }
    };
 
    for (var i = 0, len =node.length; i < len; i++) {
       node[i].onclick=helper(i);
    }
};

4.传递参数的解决方案

在开发过程曾经遇到过这样的问题:

很多个页面,比如说a-z。当我在a页面的时候,浏览器中的url会带有某些参数,当我在做完一系列的操作到达z页面。
某天有个需求,用户在页面a的时候会带上一个参数,决定用户在z页面做完操作后页面最终跳向哪里。那么这个参数该怎么传递到z页面呢?

第一种解决方案:

a页面到z页面跳转的过程中,通过 GET
的方式在url中带上这个参数;

这种方案是比较常规,也是比较不错的解决方案。但是需要在页面中的逻辑跳都加上需要的参数。这样工作量比较大,而且容易出现遗漏。不建议使用。

第二种解决方案:

使用html5新特性sessionStorage来解决问题。在a页面的时候,把新添加的需要传给z页面的参数放在sessionStorage中。在z页面直接从sessionStorage中取需要获取的参数值,然后决定页面最终的跳转。

这样解决问题不仅减少了很大的工作量,也解决了工作量大会遗漏的问题。

sessionStorage的优点:

因为数据是存储在内存中,当会话结束,页面关闭以后这些数据就会被销毁。

html5移动端存储的一些坑:

当然在移动端浏览器中使用localStoragesessionStorage是没有任何问题的。但是在安卓webview中却出现了localStorage无法向移动的磁盘写数据的问题。最后通过网络搜索发现。在安卓上webview是默认不开启localStorage想磁盘写文件的权限的。所以如果需要使用localStorage的同学需要找客户端支持。详细信息如下:

图片 18

3.lable标签的 for 属性

先来看lable标签的定义:

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

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

效果如下图:

图片 19

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

扫描二维码1

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

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

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

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

    图片 20

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

    #### 1.弹性盒实现九宫格

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

mac pro

扫地机器人

iphone6s

20积分

 

优惠券

ps4

猴年限定

公仔

祝福红包

 

css代码如下:

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

**由上面的 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. `}`
23.  
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. `}`
40.  
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
代码如下:

1.   
2.   
3.   
4.  `mac pro`

5.  `祝福红包`
6.  `iphone 6s`
7.   
8.   
9.  `优惠券`

10.  
11. `20积分`
12.  
13.  
14. `扫地机器人`

15. `猴年限定`
16. `公仔`

17.  
18. `ps4`
19.  
20.  
21.  

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. `}`
12.  
13. `.row-a,`
14. `.row-b,`
15. `.row-c {`
16. `/*height: 106px;*/`
17. `font-size: 0;`
18. `overflow: hidden;`
19. `}`
20.  
21. `.row-a > div,`
22. `.row-c > div {`
23. `float: left;`
24. `width: 176px;`
25. `height: 106px;`
26. `text-align: center;`
27. `}`
28.  
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`就可以解决问题,但是如果多行呢?会出什么情况呢,看下图:  
    ![](http://img.blog.csdn.net/20160201101429898?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

    所以这里只能考虑不使用`line-height`,使用`padding`来解决问题
    ,尝试`padding`后的效果。如下图:  
    ![](http://img.blog.csdn.net/20160201101442178?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

    可以看到容器的下面多出了一部分。那也是我们使用的`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.按钮多次提交的解决方案

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

    ![](http://img.blog.csdn.net/20160201101458585?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

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

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

    1.   

    <!-- -->

    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.  `.....`
    5.   
    6.  `//返回结果以后去掉弹层`
    7.  `$('[node-type=cover_layer]',node).removeClass('cover-layer');`
    8.  `.....`
    9.  `});`

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

        $(node).on('clcik','.reward-btn',function(){
            //呼起弹层
            $('[node-type=cover_layer]',node).addClass('cover-layer');
            .....
            //返回结果以后去掉弹层
            $('[node-type=cover_layer]',node).removeClass('cover-layer');
            .....
        })

     

h5开发相关内容总结(三)
之前写过两篇开发中遇到的问题和解决方案。当时是CSS 和 JavaScript
分开写的。现在写这篇文章的时候感觉很…

3.lable标签的 for 属性

先来看 lable 标签的定义:

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

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

XHTML

<form> <label for=”male”>Male</label> <input
type=”radio” name=”sex” id=”male” /> <br /> <label
for=”female”>Female</label> <input type=”radio” name=”sex”
id=”female” /> </form>

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

效果如下图:

图片 21

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

XHTML

<lable class=”qr-btn” node-type=”qr-btn”
for=”qr-input”>扫描二维码1 <input node-type=”jsbridge”
id=”qr-input” type=”file” name=”myPhoto” value=”扫描二维码1″ />
</lable>

1
2
3
<lable class="qr-btn" node-type="qr-btn" for="qr-input">扫描二维码1
        <input node-type="jsbridge" id="qr-input" type="file" name="myPhoto" value="扫描二维码1" />
</lable>

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

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

1.禁止 a 标签背景

在移动端使用 a标签做按钮的时候,点按会出现一个“暗色”的背景,去掉该背景的方法如下

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

5.销毁事件绑定

我自己在写 js
的事件绑定的时候也经历了一个过程,刚开始的时候onclickbindlivedelegate,on
这样一个过程。

之所以会有这样的需求就是因为我们页面上的 DOM
是动态更新。比如说,某块内容是点击页面上的内容显示出来,然后在这块新出现的内容上使用click肯定是满足不了需求的。

livedelegate 属于较早版本的事件委托(代理事件)的写法。最新版本的
jquery 都是使用on 来做代理事件。效率上比 livedelegate更高。

live是将事件绑定到当前的document
,如果文档元素嵌套太深,在冒泡的过程中影响性能。
delegateon 的区别就是

JavaScript

jQueryObject.delegate( selector , events [, data ], handler ) //或者
jQueryObject.delegate( selector, eventsMap )

1
2
3
    jQueryObject.delegate( selector , events [, data ], handler )
    //或者
    jQueryObject.delegate( selector, eventsMap )

JavaScript

jQueryObject.on( events [, selector ] [, data ], handler ) //或者
jQueryObject.on( eventsMap [, selector ] [, data ] )

1
2
3
    jQueryObject.on( events [, selector ] [, data ], handler )
    //或者
    jQueryObject.on( eventsMap [, selector ] [, data ] )

由此可知,使用on的话,子代元素的选择器是可选的。但是
delegate的选择器是必须的。ondelegate更加的灵活。

很多时候我们都是只声明事件绑定,而不管事件的销毁。但是在编写前端插件的时候,我们需要提供事件销毁的方法,提供给插件使用者调用。这样做的好处就是使,使用者对插件更加可控,释放内存,提供页面的性能。

JavaScript

var that={}; $(‘.event_dom’).on(‘click’,’.childK_dom’,function(){});
$(window).on(‘scroll’,scrollEvent); var scrollEvent=function(){};
//事件销毁 that.desrory=function(){ $(‘.event_dom’).off(); //window
方法的销毁必须使用事件名称和回调函数,主要是 window
上可能绑定这系统自定义的事件和回掉 $(window).off(‘scroll’,scrollEvent);
};

1
2
3
4
5
6
7
8
9
10
    var that={};
    $(‘.event_dom’).on(‘click’,’.childK_dom’,function(){});
    $(window).on(‘scroll’,scrollEvent);
    var scrollEvent=function(){};
    //事件销毁
    that.desrory=function(){
        $(‘.event_dom’).off();
        //window 方法的销毁必须使用事件名称和回调函数,主要是 window 上可能绑定这系统自定义的事件和回掉
        $(window).off(‘scroll’,scrollEvent);
    };

如果您觉得不错,请访问
github(点我)
地址给我一颗星。谢谢啦!

打赏支持我写出更多好文章,谢谢!

打赏作者

5.pc端js生成二维码

做过一个JavaScript生成二维码的需求。当时调研了两个方案:

  1. 使用qrcodejs
  2. 使用jquery.qrcide

在使用的过程中还是遇到一些坑,总结如下:

图片 22

所以在前端有需求做生成二维码需求的时候,可以参考以上的两个点,确定自己选择哪个开源库更适合自己的项目。

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

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

图片 23

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

2.禁止长按 a,img 标签长按出现菜单栏

使用 a标签的时候,移动端长按会出现一个
菜单栏,这个时候禁止呼出菜单栏的方法如下:

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 24
图片 25

3 赞 14 收藏 5
评论

6.本地存储js字符串

当看到题目的时候,可能会“一脸蒙逼”为什么要在本地存储js字符串啊。好吧,有时候业务场景的需求确实是比较变态,且看我描述的一个业务场景。

业务场景:
因为历史的原因,我们的html5页面是跑在客户端的webview中,但是客户端的titlebar上的那个返回按钮却是调用了前端js的back方法进行页面返回的。这个时候就会出现一个问题,如果在我们的h5页面中跳出了我们自己的页面,到了第三方的页面。第三方页面的js肯定是没有我们客户端返回按钮需要的js返回方法的。

可能有人会说,“卧槽,为什么要这么搞,当初谁这么设计的。。。”或者是“让客户端同学发版,用客户端自己的返回不就解决问题了么”。

好吧,都说了是历史原因了其它的都不要说,而且找客户端同学发版也不太现实的情况下只能想其它的解决方案了。

之前已经聊到过html5的客户端存储技术sessionStorage。当然我要做的就是把那段前端的back方法存到sessionStorage中。当加载第三方的页面的时候直接从sessionStorage中读取back方法的字符串,转化为js代码,并且赋值给客户端调用的方法。

其实这里的难点是怎么把js字符串转化为可执行的js代码。

  1. 使用eval执行js代码语句,看下面简单的示例:

图片 26

由上面的代码可以知道,eval可以把简单的js字符串转化为js代码并且执行它。但是当我们的js字符串比较复杂呢?比如下面这样:

JavaScript

function aaa(){ console.log(1); }

1
2
3
function aaa(){
    console.log(1);
}

那么使用eval函数还行不行呢?看下面的示例:
图片 27

由上面的执行结果可以知道,不管怎么执行都得不到我们的预期的结果,但是有没有办法得到我们预期的结果呢?答案是:有。

  1. JavaScript中new 关键字的使用

在JavaScript中一切皆是对象。当我们创建一个函数的时候除了函数声明和函数表达式外,还可以通过new Function的方式来创建函数(这种方式并不常用,但是特殊的场景还是很有用的)。

那么使用new Function怎么解决上面的问题呢?请看示例代码:

图片 28

由上面的示例代码和c的执行结果我想很多人已经知道怎么做了,其实只需要对b的字符串函数做一下简单的修改即可,看代码:

图片 29

上面的代码执行结果的b()就是我们我想要的保存的函数体。

1.弹性盒实现九宫格

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

XHTML

<div class=”re-middle”> <div class=”row-a”
node-type=”row-a”> <div>mac pro</div>
<div>扫地机器人</div> <div>iphone6s</div>
</div> <div class=”row-b” node-type=”row-b”>
<div>20积分</div> <div></div>
<div>优惠券</div> </div> <div class=”row-c”
node-type=”row-c”> <div>ps4</div> <div>
<p>猴年限定</p>公仔</div>
<div>祝福红包</div> </div> <div
node-type=”reward-layer”></div> </div>

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

css代码如下:

CSS

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

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

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

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

CSS

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

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

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

详细代码如下:

CSS

.row-a div, .row-b div, .row-c div { -webkit-box-flex: 1; -webkit-flex:
1; -ms-flex: 1; flex: 1; border: 1px solid #000; -webkit-box-align:
center; -webkit-align-items: center; -ms-flex-align: center;
align-items: center; -webkit-box-pack: center; -webkit-justify-content:
center; -ms-flex-pack: center; justify-content: center; display:
-webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
}

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

3.流畅滚动

body{
    -webkit-overflow-scrolling:touch;
}

关于作者:zhiqiang21

图片 30

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情!

个人主页 ·
我的文章 ·
11 ·
     

图片 31

7.绝对定位的“坑”

来看一个比较常见的布局

图片 32

上面的这个布局
因为footer是相对于页面底部绝对定位的,所以当屏幕太小的时候会有一个问题footer区域覆盖了内容区域,如下图:

图片 33

那我们怎么解决这个问题呢?我看到在我们项目的源代码中是通过js给footer和内容区域所在的父容器设置一个最小的高度来解决这个为题的,这样做不好。除了会增加复杂的判断也会造成页面的重绘

JavaScript

var webViewHeight = window.innerHeight; var iosCampatibleValue = 64;
if(webViewHeight<500){ webViewHeight =500; }
$(‘#pageWrapper’).css(‘height’, webViewHeight);

1
2
3
4
5
6
var webViewHeight = window.innerHeight;
var iosCampatibleValue = 64;
if(webViewHeight<500){
    webViewHeight =500;
}
$(‘#pageWrapper’).css(‘height’, webViewHeight);

很明显上面的代码会造成页面的重绘(当然这个对系统性能消耗并不是那么容易感知)。但是用css可不可以解决这个问题呢?

当然是可以的,就是为内容容器设置一个padding-bottom它的值就是底部footer的高度,如下图:

图片 34

当移动端的屏幕比较低的时候就会是下面的这种情况:

图片 35

padding-bottom和footer重合。但是footer永远不会覆盖内容区域的内容。这时页面会出现滚动条。可能我们最初的设计是为了用户体验不让用户的屏幕出现滚动条,但是还是那句话没有十全十美的程序,在一些小众机型上为了保证页面的正常显示保证用户正常浏览我们只能牺牲一下这样的用户体验了。

2.传统方式实现

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

XHTML

<div class=”re-middle”> <div class=”row-a”> <div>mac
pro</div> <div class=”row-a-sec”>祝福红包</div>
<div class=”row-a-last”> iphone 6s</div> </div>
<div class=”row-b clearfix”> <div>优惠券</div> <div
class=”row-b-sec”></div> <div
class=”row-b-last”>20积分</div> </div> <div
class=”row-c”> <div>扫地机器人</div> <div
class=”row-c-sec”>猴年限定 <p>公仔</p> </div>
<div class=”row-c-last”>ps4</div> </div> <div
class=”reward-btn”></div> </div>

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

css 代码如下:

CSS

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

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

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

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

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

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

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

CSS

.row-c-sec { color: #ffdece; font-size: 30px; padding-top: 17px;
background-color: #f69f75; /*使容器的高=内容高度+padding +border*/
box-sizing: border-box; }

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

6.CSS 截断字符串

单行截断字符串,这里必须指定字符串的宽度

{
    /*指定字符串的宽度*/
    width:300px;   
    overflow: hidden;  
    /* 当字符串超过规定长度,显示省略符*/ 
    text-overflow:ellipsis;  
    white-space: nowrap;   
}

8.键盘被呼起模拟滚动

现在大多数的安卓系统和ios系统,当输入框获取焦点呼起系统键盘的时候,系统键盘都会将input输入框给推上键盘的上方,方便用户的输入。但是不外乎例外,特别是在某些app中,这个本身是系统的操作并不生效,这个时候如果需要达到完美的用户体验就需要人为的参与进来。

解决办法:

思路很简单,就是检测输入框的focus事件,当输入框获取焦点的时候,用js去把页面滚动一下。最好维护一个系统无法正常推起输入框的软件列表(可以通过HTTP的UA来获取软件的唯一标识)。如果可以使用系统默认的滚动就用系统的,如果不可以再人为的调用js干预。

JavaScript

function inputScroll(dom){ var tplList=[‘ss’,’bb’] ; var tpl =
$.fn.getQueryString(tpl); if(tplList.indexOf(tpl)){
dom.focus(function(){ var clientHeight = $(window).height(); var
contentHeight = clientHeight + clientHeight/2; var smsInputTop=
$(this).offset().top; content.height(contentHeight);
window.scrollTo(0,smsInputTop-76); }); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function inputScroll(dom){
var tplList=[‘ss’,’bb’] ;
 
var tpl = $.fn.getQueryString(tpl);
    if(tplList.indexOf(tpl)){
        dom.focus(function(){
            var clientHeight = $(window).height();
            var contentHeight = clientHeight + clientHeight/2;
            var smsInputTop= $(this).offset().top;
 
            content.height(contentHeight);
            window.scrollTo(0,smsInputTop-76);
            });
    }
}

图片 38

打赏支持我写出更多好文章,谢谢!

打赏作者

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

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

图片 39

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

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

XHTML

<div node-type=”cover_layer”></div>

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

CSS

cover-layer{ width:100%; height:100%; top:0; position:absolute;
z-index:9999; }

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

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

JavaScript

$(node).on(‘clcik’,’.reward-btn’,function(){ //呼起弹层
$(‘[node-type=cover_layer]’,node).addClass(‘cover-layer’); …..
//返回结果以后去掉弹层
$(‘[node-type=cover_layer]’,node).removeClass(‘cover-layer’); …..
});

1
2
3
4
5
6
7
8
$(node).on(‘clcik’,’.reward-btn’,function(){
    //呼起弹层
    $(‘[node-type=cover_layer]’,node).addClass(‘cover-layer’);
    …..
    //返回结果以后去掉弹层
    $(‘[node-type=cover_layer]’,node).removeClass(‘cover-layer’);
    …..
});

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

打赏支持我写出更多好文章,谢谢!

打赏作者

7.calc 相关问题

之前在做布局的时候使用calc 出现了很严重的线上
BUG。后来就深究了下这个属性的使用。 
calc好用的地方就是,可以在任何单位之间进行换算。但是浏览器支持的不是很好。看一下 can
i use
 截图:

图片 40

而且在使用的时候要加上厂商前缀,达到兼容性。不过现在不推荐使用,毕竟,浏览器支持有限。 
示例代码:

#formbox {
  width:  130px;
  /*加厂商前缀,操作符(+,-,*,/)两边要有空格)*/               
  width:  -moz-calc(100% / 6);   
  width:  -webkit-calc(100% / 6);   
  width:  calc(100% / 6);   
  border: 1px solid black;
  padding: 4px;
}

研究过淘宝,天猫,京东的
h5端页面看到这个单位用的不多,主要还是兼容性的问题吧。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 41
图片 42

2 赞 13 收藏 1
评论

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 43
图片 44

2 赞 16 收藏 3
评论

8.box-sizing 的使用

解决盒模型在不同浏览器中表现不一致的问题。但是仍然会有兼容性问题。看最下面的浏览器支持列表。

box-sizing 属性用来改变默认的 CSS 盒模型
对元素高宽的计算方式。这个属性用于模拟那些非正确支持标准盒模型的浏览器的表现。

它有三个属性值分别是:

content-box 默认值,标准盒模型。 width 与 height
只包括内容的宽和高, 不包括边框,内边距,外边距。注意: 内边距, 边框 &
外边距 都在这个盒子的外部。 比如. 如果 .box {width: 350px}; 而且
{border: 10px solid black;}
那么在浏览器中的渲染的实际宽度将是370px; 
padding-box width 与 height 包括内边距,不包括边框与外边距。 
border-box width 与 height
包括内边距与边框,不包括外边距。这是IE 怪异模式(Quirks mode)使用的
盒模型 。注意:这个时候外边距和边框将会包括在盒子中。比如 .box {width:
350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

浏览器支持:

图片 45

关于作者:zhiqiang21

图片 46

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情!

个人主页 ·
我的文章 ·
11 ·
     

图片 31

关于作者:zhiqiang21

图片 48

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情!

个人主页 ·
我的文章 ·
11 ·
     

图片 31

9.水平垂直居中的问题

可以看之前写定位的一篇文章,末尾有讲到各种定位:【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

这里实现一个相对定位和绝对定位配合实现水平垂直居中的样式。看效果:

图片 50

html 代码如下:

    <div class="parent-div">
        <div class="child-div"></div>
    </div>

css代码如下:

.parent-div{
            width: 100px;
            height: 100px;
            background-color:red;
            position:relative;
        }
        .child-div{
            width:50px;
            height:50px;
            background-color:#000;
            position: absolute;
            margin:auto;
            top:0;
            left:0;
            right:0;
            bottom:0;
        }

绝对定位在布局中可以很方边的解决很多问题,但是大多数时候都不去使用绝对定位,而是使用浮动等方法。而当需要
DOM 元素脱离当前文档流的时候才使用绝对定位。如: 弹层,悬浮层等。

10. css 中 line-height 的问题

line-height 一个很重要的用途就是让我们的文本可以在父级元素中垂直居中,但是在使用它的过程中也会遇到一些问题。

先来看一个实例,如下图: 
图片 51

代码也很简单,就是当我们在div 中定义的字体很大的情况下,我们看到字体和父级元素之间有一些空隙。那么这是为什么? 
我们查一下 line-height 的定义,如下:

normal 默认。设置合理的行间距。 
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 
length 设置固定的行间距。 
% 基于当前字体尺寸的百分比行间距。 
inherit 规定应该从父元素继承 line-height 属性的值。

所以在以上的情况我们要想使,我们的字体能够撑满我们的容器,就需要给父级容器添加 line-height属性且值为 100%

代码和效果如下: 
图片 52

那么为什么会出现上面的问题呢?

line-height 与 font-size
的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和底部。

所以,可以得出下面的一个公式:

空白间距 = line-height – font-size

所以,当设置为line-height 的值为100%的时候,line-height的值就等于 font-size的尺寸,此时的空白间距为0

11.使用 vertical-align 调整图标垂直居中

很多时候我们要把图标和文字配合使用,而且需要图标和文字都能够垂直居中。如下图所示:

图片 53

如果要实现文字的垂直居中很容易,只需要使用line-height=父容器高度 。但是要想使图标能够垂直居中就比较麻烦。 
正常情况下我们的文字或者说相邻的容器,都应该和文字保持在相同的底线上,如下图:

图片 54

明显的可以看到我们的返回图标不是垂直居中的。那么应该怎么样使图标垂直居中呢?

首先,我们先来搞清楚几个线的关系(图片来源于网络,侵权请告知): 
图片 55

这样我们就要用到 vertical-align 这个属性,最重要的一点是: 
指定了行内(inline)元素或表格单元格(table-cell)元素的垂直对齐方式

baseline:将支持valign特性的对象的内容与父级元素基线对齐 
sub:元素基线与父元素的下标基线对齐。 
super:元素基线与父元素的上标基线对齐。 
top: 元素及其后代的顶端与整行的顶端对齐。 
text-top:元素顶端与父元素字体的顶端对齐。 
middle:元素中线与父元素的基线对齐。 
bottom:元素及其后代的底端与整行的底端对齐。 
text-bottom:元素底端与父元素字体的底端对齐。 
percentage:用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。 
length:用长度值指定由基线算起的偏移量。可以为负值。基线对于数值来说为0。(CSS2)

看下边的一段 html :

    <div class="title-div">
        <img src="1_icon.png" alt="返回图标">
        <!-- 图标位置 -->
        我就是标题
    </div>

最初的结果是这样子的

图片 56

我们想实现如下图所示的结果,图标相对于右边的字体居中:

图片 57

这个时候我们就要使用vertical-align属性和设置他的length属性,即设置我们的图标相对与文字基线的偏移量。 
当我们加入属性的时候很容易使图标和文字都垂直居中。

{
    vertical-align:15px;
}

这个时候就会是我们的图标和字体相对于父级元素居中。

12.flex 弹性盒模型的使用

flex 现在 pc 端支持的不好(主要是因为还有很多
IE8,9的用户存在。)大多情况下我们都是在移动端使用flex布局。但是就算是这样,也会有很多坑人的
bug出现。 
谈谈一些基本的使用经验吧,什么时候使用 flex 。

1.什么时候使用 flex 属性

先来看一个产品模型如下图

图片 58

我的左边商品和右边商品的宽度是一样的。当我看到这个模型的时候,第一件就是想就是使用 flex 让我们两列商品列表平分屏幕区域。这个时候就是用flex 来做。 
父级元素如下定义

{   
    margin-bottom: .5rem;
    display: box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

2.添加厂商前缀

使用 flex
的时候一定要记得加厂商前缀(目前使用方式都有三种写法:1,旧的2,过度的3,新的)。不然肯定会有兼容性问题。

{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
 }

3.flex低版本浏览器的兼容

先看我的代码:

{
    box-flex: 1;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 18.5rem;
}

这里只是让左右两边平分屏幕的宽度。 
之前使用
flex在安卓4.3的手机上遇到一个问题。正常的页面应该如下图所示,

图片 59

但是在 安卓4.3的手机上却是如下的结果

图片 60

后来研究了下天猫的页面(因为之前使用这个 flex
就是参考天猫来学习的),看到他们在定义flex值的时候
都会有这样的一个属性width=0;

图片 61

而且当我给我的页面也加上这个属性的时候,页面的布局也变得正常了。我现在想不明白愿意是什么,只能当一个 hack 来使用。如果大家也遇到这个问题,请试一下添加这个属性。如果大家知道为什么这么用,请指教一下。

13.CSS3动画性能的问题

给大家推荐一个网站(点击这里)可以检测我们平时使用的
css 属性改变元素样式的时候,触发的是 cpu还是 gpu
,特别是在做动画的时候,如果使用 gpu 渲染图形,可以减少 cpu
的消耗,提高程序的性能。

比如我们做一个 slider
动画切换图片位置的时候,会使用margin-left的属性,通过网站查询该属性值得到如下的结果

图片 62

由上可以知道使用margin-left 的时候会处罚页面的重绘和重排。

但是当我们使用CSS3新属性transform 来代替传统的 margin-left 来改变元素位置的时候对页面有什么影响呢?先来看下网站查询的结果:

图片 63

由查询结果可以知道,使用transform 不会触发任何的重绘。而且会触发 gpu
来帮助页面的排版。即使用GPU操作渲染动画,减少cpu的消耗,提高性能。

css动画简单实例,css代码如下:

.lottery-animation {
    -webkit-animation: lottery-red 2s;
    animation: lottery-red 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes lottery-red {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes lottery-red {
    from {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

效果如下图:

图片 64

这里我只是对图像标签添加了一个 class="lottery-animation"

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图