Summary of mobile h5 Development (III)

Summary of mobile h5 Development (III)

I have previously written two issues and solutions encountered during development. At that time, CSS and JavaScript were written separately. When I write this article, I feel that a lot of content is internally related, so it is difficult to separate it.

Let's share your feelings over the past six months:

There is a great distance between understanding and understanding. When someone talks about a knowledge point, they can talk about it and express their opinions. Understanding what knowledge points can be used to solve a problem.

Therefore, I have seen many knowledge points in books, but I don't know how to use them or how to use them when I encounter problems, sometimes some colleagues give instructions on how to solve the problem. The key is to read more (read books, read other people's Code) and use more.

1. display: none; and visibility: hidden;

display:noneDisables the display of an element (which has no effect on the layout). All its descendant elements are also disabled. This element does not exist during document rendering. (The location is not displayed in the Document Stream, but the DOM node will still appear in the Document Stream)
visibility:hiddenThe visibility attribute allows you to control the visibility of a graphic element, but it still occupies the position in the Document Stream during display.

Usedisplay:noneThe element is not displayed, but the DOM node still appears, so we can use the selector to operate the element. Example in:

2. Problems Caused by event bubbling

This problem occurs in the previous article "h5 terminal calls the camera to scan the QR code and parse it. For detailed code, see the article.

Problem scenarios

First look at the html code:

1. Scan QR code 1
3.  

My previous thought was like this:
1. I first triggerqr-btnOfclickEvent, triggered in callbackinputOfclickEventclickEvent
2. then triggerinputOfchangeEvent to obtain the information of the uploaded image.

According to my ideas, the Code should look like the following:

1. // Click the event of the parent Element
2. $('.qr-btn').bind('click',function(){
3. // Trigger the subelement event
4. $('[node-type=jsbridge]').trigger("click");
5. });
6. $('[node-type=jsbridge]').bind('change',function(){
7. // Do something
8. });

The above code, according to the normal idea, should be no problem, but there is a problem in the actual running process. The browser reports the following error information:

This is because of stack overflow. So why is this problem? I place the breakpoint at the following position and click the child element.

The following situations occur:Unlimited code triggering$('.qr-btn').bind(...)The above error message is displayed. So why?
Think about it and find that:It is because of event bubbles. ClickclickEvent, sub-elementclickEvent bubbles to the parent element to triggerclickEvent, and then the parent element triggersclickEvent, which leads to a loop of events.

Solution:

How can I solve the problem by trying to prevent event bubbles?
Then we try to trigger the sub-elementclickTry to bubble the sub-elements to see if they can solve my problem? Add the following code:

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

After my tests, the code can run normally.

Is there a better way to solve the above problem? Please refer to the following content

3. for attributes of lable labels

Let's take a looklableTag definition:

Label isinputElement Definition annotation (TAG ).
labelThe element does not present any special effect to the user. However, it improves availability for mouse users. If you click Text in the label element, this control is triggered. That is to say, when the user selects the tag, the browser automatically redirects the focus to the form control related to the tag.
LabelforThe property must be the same as the id property of the relevant element.

Let's take a look at the sample code and effects of w3school:

The effect is as follows:

Here we should know how to improve our code,
 

 
  
Scan QR code 1
  
 

In addition to the style of the lable label, we need to define it ourselves. There are two advantages:

• Reduces JavaScript writing;
• lableLabels andinputLabels do not need to be contained. 4. Comparison of advantages and disadvantages between the "bullet box" layout and the general box model layout

  Recently, a lottery activity was held, with an animation of the rotation of the wheel (note that the choppy gif image in the middle is played again )., The effect is as follows:

  We will continue to introduce animation implementation in the next article. Here we will focus on the layout issues. This is because we have different pages in pc and mobile. Therefore, I have used two solutions for pc and mobile respectively. The traditional pc layout is implemented, and the h5 "elastic box" is implemented.

  1. Elastic box implementation

  The lights on the periphery are made of absolute positioning, but there are not too many introductions. The main thing is to look at the nine cells in the middle of the prize. The html code is as follows:

  Mac pro sweeping robot iphone6s20 credit coupon ps4

  Monkey year limit

  Lucky lucky money

  The css code is as follows:

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

  The above css Code shows that I only use the "elastic box" in the horizontal direction, while in the vertical direction, I still use a fixed height (because I use the rem unit, the height here is not accurate and will be calculated based on the fontsize value .)

  Can I use an elastic box both vertically and horizontally?
  Let's take a look at the following css code:

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

  At the weekend, I read the "elastic box" document about the layout and finally realized the horizontal vertical center of the content in both vertical and vertical directions.In fact, the above Code only needs to define the content's parent elementdisplay:flexAdd two more attributesjustify-contentAndalign-itemsYou can. The former controls the vertical center of the content of the elastic box, and the latter controls the horizontal center of the content.

  The Code is as follows:

  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. Traditional implementation

  Compared with the h5 end, I implement the traditional pc end.FloatingMethod. My HTML code is as follows:

  1.  
  2.  
  3.  
  4. mac pro
  5. Lucky Red Packets
  6. iphone 6s
  7.  
  8.  
  9. Coupon
  10.  
  11. 20 points
  12.  
  13.  
  14. Robot sweeping
  15. Monkey year limit

  16. Doll

  17.  
  18. ps4
  19.  
  20.  
  21.  

  The css code is as follows:

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

  From the comparison of the above css code, we can clearly see the advantages and disadvantages of the traditional floating layout and the elastic box layout:

  • floatThe layout code is concise, but the width and height of the specified box must be determined. The multi-screen adaptation will be slightly different (except for rem dynamic computing ).
  • The "elastic box" layout Code uses the new css3 attribute. You need to add additional vendor prefixes to increase the complexity of the Code. (To add a vendor prefix, you can use the sublime plug-in to complete it with one click, recommended sublime configuration of front-end development engineers in my article)
  • The elastic box provides convenience for multi-screen adaptation. I don't have to worry about the width and height of the sub-element, or the width of the screen.flexIt will adapt itself.

    The following is a small problem:
    The text element in the jiugongge, if it is only a single line, you only need to useline-heightThe problem can be solved, but what if there are multiple rows? What will happen? See:
    

    So we can only consider not to useline-height, UsepaddingTo solve the problem, trypadding. For example:
    

    We can see that there is an additional part below the container. That's what we use.paddingSo how to solve this problem? This requires the use of the previously mentionedbox-sizingTo solve the problem.

    1. .row-c-sec {
    2. color: #ffdece;
    3. font-size: 30px;
    4. padding-top: 17px;
    5. background-color: #f69f75;
    6. /* Make the container height = content height + padding + border */
    7. box-sizing: border-box;
    8. }
    5. Solution for multiple button submissions

    The plug-in for "Running Horse lights" encountered a problem, that is, when the user clicks the start lottery button and does not return the result, the user clicks the lucky draw button for the second time, at that time, there was a strange problem. For example, if the result returned when the first request and the second request overlap shows one, the interaction is unfriendly even if the user is allowed to perform a second lottery. In addition, if the front-end page is not limited, the display will also have a strange problem. For example:

    Isn't that bad...

    So how can I solve this problem?
    The answer is simple. After I click the button, a transparent bullet layer pops up with absolute positioning and overwrites the button. After the result is returned and displayed, I remove the bullet layer at the same time. This avoids repeated submission by users. Take a closer look at the Code:

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

    Here, make sure that my transparent bullet layer can be covered by the lottery button. Of course.classYesJavaScriptDynamic addition and deletion.

    1. $(node).on('clcik','.reward-btn',function(){
    2. // Call the pop-up layer
    3. $('[node-type=cover_layer]',node).addClass('cover-layer');
    4. .....
    5.  
    6. // Remove the bullet layer after the returned result
    7. $('[node-type=cover_layer]',node).removeClass('cover-layer');
    8. .....
    9. });

    This is the next time we will share the JavaScript development process of the "Carousel" lottery.
     

    $ (Node ). on ('clc ','. reward-btn ', function () {// call the pop-up layer $ (' [node-type = cover_layer] ', node ). addClass ('Cover-lay ');..... // remove the bullet layer $ ('[node-type = cover_layer]', node) after the result is returned ). removeClass ('Cover-player ');.....})