What can you learn from this chapter?

Here’s a preview of the H5:

SCSS + “Alibaba vector icon library” 2, CSS3 Flex layout 3, CSS3 animation 4, SCSS loop traversal 5, compatible app/ small program 6, call native API (modify header state color)

Let’s look at it in detail

SCSS + “Alibaba Vector Icon Library”

How do you still not use “Alibaba vector icon library” partners, you can click here: Alibaba vector icon library Iconfont use method

H5 small program side, either way, can be used, but the APP side is not, if the introduction of fonts, will not find.

Correct method: 1. Select an icon and download it to the local PC

2, unzip, select “iconfont. CSS” and copy it to “Commons”.

3. Modify iconfont. CSS

@font-face { font-family: "iconfont"; src: url('data:application/x-font-woff2; charset=utf-8; base64...) ; }...Copy the code

Delete all SRC except base64.

4. Apply iconFont

< I class = "iconfont" >  < / I > <! --or--> <i class="icon iconfont icon-calendar"></i>Copy the code

Here “” and “icon-calendar” are the Unicode and Font classes of “Alibaba Vector Icon Library” respectively. It depends on the icon you choose.

CSS 3 flex layout

If you are not familiar with Flex, you can click here: CSS3 flex flex layout how to use flexibly?

Here is a brief introduction

.dis-flex{
  display: flex;
}
.flex-item{
  flex: 1;
}
Copy the code

The container of the. Flex-item class is not defined under.dis-flex, and will automatically adapt to the content width. The width of the flex-item container is defined, equal to the total width minus the width of the other container, which is not defined, divided according to the values in “Flex: Values”.

CSS 3 animation

Recommended article: How to quickly start basic CSS3 animation

For the window raindrop effect, the structure is not too complicated. There are two main layers, one is the window, and the other is the raindrop. In this case, the.window is used to represent the window, and the raindrops above are placed in the.raindrops container. Drops are made from.border and.drops. And put the Windows, Windows, raindrops and raindrops into the rain-container

scss:



NavigationBar is compatible with apps/applets

There is no way to customize the top of the applet, the most you can do is change the text color, and the background color. So, to our renderings, the top of the search box, the small program is no way to achieve, so we need to do compatible processing

<! -- Applet header compatibility --> <! -- #ifdef MP --> <view class="mp-search-box"><strong></strong> <input class="ser-input" type="text" value=" input keyword search "/> </view> <! -- #endif -->Copy the code

In this code, the first comment is true, the second and third comments are the syntax of the Uni App to judge the device, here is the. Mp-search-box if it is a small program.

So, the applet preview looks like this:

Call native API (modify header state color)

Similarly, when calling native apis, we also need to judge the device, otherwise h5 will report an error.

loadData() {
  // #ifdef APP-PLUS
  plus.navigator.setStatusBarStyle('light');
  // #endif
},
Copy the code

We modify the color of the head state (signal, wifi, time, power, etc.)

Preview of real machine debugging:

Tip:

Here, the device is not judged by bringing the code into the package, but by generating the corresponding code package for different devices when the package is compiled.

Native apis that can be called:


Is not to see the graph, feel how js so powerful, right, is so powerful.

conclusion

What have you learned from this chapter? Progress a little bit every day, the life behind easier oh, come on.

Thank you for your support!

The original address: www.javanx.cn/20190826/un…