[wechat applet] basic use of common components (view/scroll-view/wiper, text/rich-text, button/image)

Author's brief introduction ： Su Liang （ Focus on web crawlers , Data analysis , On the way to learning the front end ）
Blog home page ： Su Liang .py The blog of
Series column ： Basic course of applet development
Aphorisms ： The sea is wide with fish , The sky is high and the birds are flying .
If you think the blogger's article is good , I hope you can support me for the third time in a row ！！！
Follow the likes collection

Daily recommendation

Recommend an artifact to everyone . Whether you are a student party or an office worker, you can use , The interview question bank is covered here , Brush questions online , Interviews with major manufacturers / Written test questions, etc . If you're still a student , The most important point is the simulated interview function , intelligence AI1v1 interview , Help you get to the big factory as soon as possible offer！ Click the link to go directly to ！=> Cattle from - Looking for work artifact

Common view container class components

view

Normal view area , Be similar to HTML Medium div, It's a Block-level elements Often used to Realize the layout effect of the page .

WXML Code ：

WXSS Code ：

Realization effect ：

Flex Layout portal ：【 Applet 】&【web front end 】 necessary -Flex Detailed layout （ Elastic box ）

scroll-view（ rolling ）

Scrollable view area , Often used to Implement scrolling list effect .
Add attribute scroll-y, That is, vertical scrolling .scroll-x, That is, horizontal scrolling .

WXML Code ：

WXSS Code ：

Realization effect ：

swiper and swiper-item（ Shuffling figure ）

Carousel map container assembly , Shuffling figure item Components

swiper Common properties of components

attribute	type	The default value is	explain
indicator-dots	boolean	false	Display panel indicator
indicator-color	color	rgba（0,0,0,3）	Indicate the color
indicator-active-color	color	#000000	The currently selected indicator color
autoplay	boolean	false	Auto switch or not
interval	number	5000	Auto switch interval
circular	boolean	false	Whether to adopt the joint sliding

WXML Code ：

WXSS Code ：

Realization effect ：

Common basic content components

text

Text component , Be similar to HTML Medium span label , It's a Inline elements .
Use text Component and add selectable attribute It can achieve the effect of long press to select .
WXML Code ：

Realization effect ：

rich-text

Rich text component , Support hold HTML The string is rendered as WXML structure .
adopt rich-text Component's nodes attribute node , hold HTML The string is rendered as the corresponding UI structure .
WXML Code ：

Realization effect ：

Other common components

button

Button components , Functional ratio HTML Medium button Rich buttons , adopt open-type attribute Sure Call various functions provided by wechat （ Customer service 、 forward 、 Get user authorization 、 Access to user information, etc )

Three button styles

General button / Main tone button / Warning button , Default Wrap

style ：

Small button （mini）

Set up size="mini" that will do , Do not wrap after setting

style ：

Hollow button （plain）

Remove background color . add to plain attribute that will do .

style ：

image

Picture components ,image The default width of the component is about 300px、 The height is about 240px
adopt src attribute Add image address ：

image Of mode attribute

mode value	explain
scaleToFill	( The default value is ） Zoom mode , Do not keep aspect ratio zooming picture , Stretch the width and height of the picture completely to fill image Elements
aspectFit	Zoom mode , keep Aspect ratio zoom picture , Make the long edges of the picture fully visible . in other words , The picture can be displayed completely .
aspectFill	Zoom mode , Keep the aspect ratio scaled , Only make sure that the short side of the picture is fully displayed . in other words , Pictures are usually complete only horizontally or vertically , Intercept will occur in the other direction .
widthFix	Zoom mode , The width does not change , Automatic height change , Keep the aspect ratio of the original image unchanged
heightFix	Zoom mode , The height remains the same , The width changes automatically , Keep the aspect ratio of the original image unchanged

Let's see the effect ：

1. scaleToFill
   
2. aspectFill
   
3. aspectFit
   
4. widthFix
5. heightFix
   

Here we have introduced the basic components commonly used in small programs , Welcome to subscribe to this column , Ongoing update …

More question banks and summary of knowledge points , Interview skills => Cattle from , Come and brush the questions with me ！