澳门在线威尼斯官方 > 威尼斯澳门在线 > h5开发相关内容总结,UC浏览器的兼容问题

原标题:h5开发相关内容总结,UC浏览器的兼容问题

浏览次数:175 时间:2019-11-10

活动端 h5开采相关内容总计(3卡塔尔

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

本文笔者: 伯乐在线 - zhiqiang21 。未经小编许可,禁绝转发!
招待参与伯乐在线 专辑小编。

早先写过两篇开辟中遇到的主题材料和设计方案。那时是 CSS 和 JavaScript 分开写的。未来写那篇随笔的时候认为比相当多剧情都以有内在联系的,所以不佳分开。

给大家享用一下那半年来的感触呢:

接头和精通里面是有比异常的大间距的。外人提及三个知识点,能接上嘴况且能见报一下和睦的视角,那叫知道。蒙受难点可以想到用如何知识点消除问题,那叫掌握。

进而有成千上万知识点自身确实在书上都看出过只是在日常遇见题指标时候却不知情怎么去用或然说想到去用,不时候会有同事给一下教导说用哪些消除难题。关键时候还是多看(看书,看人家的代码卡塔尔和多用。

display: flex;

主题材料时有发生的风貌

先看风姿洒脱段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(){
        //做一些事情
    });

地点的代码,依据正规的思绪应该是从未有过难点的,可是,在事实上的运转进程中却发生了难点。浏览器的报错音讯如下:

图片 1
那是因为仓库溢出的难点。那么为啥会冒出那样的主题素材吗?小编把断点打在了以下之处,然后点击子成分

图片 2

发生的状态是:代码Infiniti次的接触$('.qr-btn').bind(...) ,就现身了地点的报错新闻。那么是哪些原因促成的吧?
思想一下发觉:是因为事件冒泡的主题材料。作者单击父成分触发子成分的click 事件,子成分的 click 事件又冒泡到父元素上,触发父成分的 click 事件,然后父成分再一次接触了子元素的 click 事件,那就引致了平地风波的大循环

text-align: center;

4.“弹层盒”布局和平常盒模型布局的利害相比较

近几年做了三个抽取奖金的位移,当中就有二个轮盘的转动的动漫效果(注意啦,中间的那多少个卡顿是 gif 图片又再次初始广播了卡塔 尔(阿拉伯语:قطر‎。,效果如下图:

图片 3

至于动漫实现在下风姿罗曼蒂克篇文章中会继续介绍,这里最首要来关爱下布局的标题。因为我们页面会在 pc 和活动移动各出大器晚成套。所以在 pc 和移动本身分别用了两种方案,pc 守旧布局完结,h5 “弹性盒”达成。

 /* Chrome */            

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;
}

-webkit-flex: 1;         

5.按键数次付给的技术方案

在做“跑马灯”插件的时候碰着了三个标题,就是顾客点击带头抽取奖品按键之后在还平昔不回到结果的时候用户又第叁次点击抽取奖金按键,当机会会合世“奇葩”的标题。比方说:第一遍倡议和第叁回号召重合重临的结果展现哪七个,尽管允许客户张开一次抽取奖品,人机联作也不团结。何况只要前端页面不做限制以来,展现也会现身奇葩的主题素材。比方下边那样:

图片 4

那般是或不是很倒霉啊。。。

这便是说笔者是怎么撤销这么些难点吧?
答案很简短,笔者便是在点击开关之后,使用相对化定位弹起了贰个透明的弹层,将开关给覆盖,等结果重临并展现以往,笔者在同一时候去掉弹层。这样就制止了顾客的再一次提交。详细看一下代码:

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 开荒进度。

打赏支持本身写出越来越多好文章,多谢!

打赏作者

.demo1{

至于小编:zhiqiang21

图片 5

做认为对的作业,假诺只怕是错的,那就做以为自身担负得起的事务! 个人主页 · 作者的篇章 · 11 ·      

图片 6

-webkit-box-align: center;

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 就足以消除难题,可是如若多行吧?会出什么情况呢,看下图:
图片 7

故此这里只可以思虑不行使line-height,使用padding 来解决难题,尝试padding后的功用。如下图:
图片 8

能够看来容器的上边多出了意气风发局地。那也是我们应用的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;
}

display: flex;

主题素材解决办法:

尝试阻止事件的冒泡,看能够沦亡难题?
那大家品尝在触发子成分的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();
});

因此笔者的测验,代码是能够符合规律的运维的。

这就是说大家有未有更加好的艺术来解决地方的标题呢?请看接下去的从头到尾的经过

-webkit-flex-direction: column;

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

display:none 关闭三个因素的来得(对布局尚未影响卡塔 尔(英语:State of Qatar);其具有后代成分都也被会被关闭彰显。文书档案渲染时,该因素就好像不设有。(不会显得在文书档案流中之处,不过DOM 节点仍会冒出在文书档案流中卡塔尔
visibility:hidden visibility属性令你可见支配多个图产生分的可以预知性,不过仍会攻下展现时候在文书档案流中的地点。

使用 display:none 的时候就算成分不会呈现,不过DOM 节点仍会自但是然,所以我们就能够利用选择器对该因素实行操作。如下图中的示例:

图片 9

<div>flex</div>

2.事变冒泡引发的难题

这几个标题是发生在协和上篇小说《h5端呼起摄像头扫描二维码并分析》中的。详细的代码能够看那篇文章。

display: -webkit-flex;    /* NEW - Chrome */

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>

效果如下图:

图片 10

到此处应该之道大家该怎么纠正大家的代码了,

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 标签未有要求是含有关系

-webkit-box-flex: 1;

打赏援助小编写出更加多好作品,多谢!

任选生龙活虎种支付形式

图片 11 图片 12

2 赞 16 收藏 3 评论

display: flex;

.next {

-webkit-flex: 1;          /* Chrome */

display: -webkit-flex;

在UC浏览器上应用display:flex;时会不起功能,要增添包容性写法,

 width: 20%;             

display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */

</div>

 /* For old syntax, otherwise collapses. */            

/* OLD - Firefox 19- (buggy but mostly works) */

display: -webkit-box;     

-moz-box-flex: 1;        /* OLD - Firefox 19- */

<div class="demo1">

line-height: 40px;

align-items: center;

flex-direction: column;

}

 -moz-box-flex: 1;        

margin: 0;

.demo2>div{

<button class="btn prev">button</button>

<div class="demo2">

}

<input type="button" class="btn next" id="btn" value="input">

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */

}

/* TWEENER - IE 10 */

height: 200px;

.demo3{

background-color: yellow;

-webkit-flex: 1;

display: -ms-flexbox;     

cursor: pointer;

<div>flex</div>

align-items: center;

background-color: green;

flex: 1;

/* NEW - Chrome */

font-size: 17px;

-webkit-align-items: center;

}

/* OLD - iOS 6-, Safari 3.1-6 */

margin-right:6px;

 /* IE 10 */           

}

-moz-box-orient: vertical;

<style>

.demo1>div{

font-weight: 700;

display:block;

<div>flex</div>

background-color: green;

html,body{

-webkit-box-align: center;

<h2>左右排列,上下居中</h2>

}

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:h5开发相关内容总结,UC浏览器的兼容问题

关键词:

上一篇:20款免费的JavaScript游戏引擎,HTML5和Unity开发网页

下一篇:没有了