27. WeChat Mini Program (Component – View Component)
foreword
What are components?
Components are some basic tags we write HTML, such as div, span, p, ul, li, etc. In most HTML tags, many of them need to write some effects by themselves, but in applets, many tags have their own effects, which can realize some simple JS logic.
There are many interesting components in WeChat applets, which provide great convenience for us to develop applets
Introduction
A Mini Program page can be decomposed into multiple parts, and a component is the basic unit of a Mini Program page. In order to allow developers to develop quickly, the host environment of Mini Programs provides a series of basic components.
Components are used in the declaration of the WXML template file. The syntax of WXML is similar to that of HTML. The applet uses a tag name to refer to a component, usually including a start tag and an end tag. The attributes of the tag are used to describe the component.
component type
The applet divides the components into the following common types according to the application scenarios:
①View container component—view, swiper
②Basic content component—icon
③Form component
④Navigation component
⑤Media component ⑥Map
component
⑦Canvas component
The course will introduce them one by one later
tabBar page
First create a new view folder and write the test view container component code
In order to facilitate viewing of the debugging code, a new tabBar related to the component is created next to test the effect of the related component
view container component
View container component
①view view container
②swiper slider view container component and swiper-item slider component
③movable-area movable area component and movable-view movable view component
④scroll-view scrollable view area
(1) view view container
View component: It is the basic component in the applet. It is equivalent to the div tag in HTML. It has several great attributes, which can be used to simplify our applet development.
Parameters:
①hover-class attribute is followed by string, and string is a class name. When this component is clicked, add the class string, which is equivalent to the effect of mouse movement on the PC side. ②hover-stop-propagation Boolean value,
use To prevent the bubbling behavior of hover-class
③hover-start-time After clicking the view, how many milliseconds is the delay for the string to appear
④hover-stay-time The retention time of the string after the finger is released, in milliseconds
(2) Slider view container swiper and slider swiper-item component
swiper large image scrolling component; many times in the banner, it is necessary to add the effect of large image scrolling, this component can easily help us complete this work.
Only the swiper-item component can be placed in the slider view container swiper, otherwise it will cause undefined behavior. The swiper is the outermost label of the big image scrolling, and each scrolling item is inside the swiper-item.
Note: swiper-item can only be placed in the swiper component, and the width and height are automatically set to 100%
The swiper slider view container is placed on the left outer layer, and the sliding carousel item inside uses the swiper-item slider component. At this time, the basic carousel function can be realized, but the style needs to be adjusted twice
(2) Slider view container swiper and slider swiper-item components
①Swiper slider container component default style
②swiper-item default width and height 100%
③image default style
Next adjust the style
cue point related
(2) Slider view container swiper—parameter
The slider swiper-item component is generally obtained through a cycle, so make the following adjustments here
Auto switch with direction
Automatic switching and direction: Next, test
(2) the slider view container swiper and the slider swiper-item component in turn.
Automatic switching and direction
Note:
current is the index of the current slider, and the value cannot exceed the index of the slider component. If it exceeds, the console will display a warning
(2) Slider view container swiper and slider swiper-item component
layout style
Layout style - switch trigger function
bindchange function return value
(2) Note: The slider swiper-item component attribute
can only be placed in the swiper component, and the width and height are automatically set to 100%
(2) Note: After the slider swiper-item component attribute
is set item-id, which is the identifier of the slider component swiper-item, when the bindchange event is triggered, the slider component identifier currentItemId can be obtained
(2) The return value of the bindchange function of the slider view container swiper and the slider swiper-item component
change event source return value
Starting from 1.4.0, the change event adds a source field, which indicates the cause of the change, and the possible values are as follows:
①autoplay causes the swiper to change
②touch causes the user to swipe to cause the swiper to change
③other reasons will be represented by an empty string
(2) Slider view container swiper and slider swiper-item component
Wechat applet swiper realizes sliding zoom in and out effect
For space issues, please refer to the ppt in the next section for details
(2) Slider view container swiper and slider swiper-item components
Slider view container swiper property
Legal value of easing-function
①default default easing function; ②linear linear animation; ③easeInCubic easing in animation
④easeOutCubic easing out animation; ⑤easeInOutCubic easing in and easing out animation
(2) Slider view container swiper and slider swiper-item components
Slider view container swiper property
(2) Slider view container swiper and slider swiper-item components
(2)
After the slider view container swiper and slider swiper-item component bindtransition properties are set, the event will be triggered by sliding the carousel at this time
(2) Slider view container swiper and slider swiper-item components
bindanimationfinish triggers events when
the animation ends
At this point, the event is triggered when the banner is switched
The above is the introduction of the properties and parameters of the slider view container swiper and slider swiper-item components.
Notice:
The slider swiper-item component can only be placed in the swiper component, and the width and height are automatically set to 100%
(3) movable-area and movable-view movable
-view is a movable view, which can be dragged and slid on the page.
Note: Similar to swiper-item and swiper relationship. The movable-view mobile view must be in the movable-area mobile area component and must be a direct child node, otherwise it cannot be moved.
(3) Movable view area movable-area and view movable-view
movable-view parameters
direction is the movable direction: all all directions, vertical vertical direction, horizontal horizontal direction, none does not move.
When the inertia inertia is set to true, the movable-view will still slide for a certain distance after releasing the finger.
When out-of-bounds (limit / limit range) is set to true, it can still move beyond
The larger the friction coefficient (highway), the shorter the inertial sliding distance; the smaller the friction friction coefficient (skating rink), the longer the inertial sliding distance; official document:
disable the moving view when disabled is true
Problem: 
when set to true.
Note: Similar to the hover-stop-propagation attribute, as long as this attribute is added, it will be disabled regardless of whether it is set to true or false.
Problem: After setting the scale to true for movable-view, it is found that it cannot be zoomed.
Reason: The movable-view is too small, and the effective area of the zoom gesture is small. Just reset the view size
(3) Note: There is only one movable-area parameter for the movable view area
When the scale-area is set to true for the movable-area, the effective area of the zoom gesture will be modified to the entire movable-area
The scale-min reduction critical value is 0.5, that is, the width and height can be reduced by half at most.
The scale-max method critical value is 10, that is, the width and height can be enlarged
by up to 10 times.
(3) Movable view area movable-area and view movable-view
bindchange parameter source
The source returned by bindchange indicates the reason for the movement
summary:
①movable-view must set the width and height attributes, if not set, the default is 10px
②movable-view defaults to absolute positioning, and the top and left attributes are 0px
(4) scrollable view area scroll-view
scroll-view is a scrolling view, divided into horizontal scrolling and vertical scrolling.
Note: When the scroll view scrolls vertically, the height must be set, otherwise scroll-view will not
take effect. The commonly used place for scroll view is generally the interface with more Item items
(4) scrollable view area scroll-view
Note: Horizontal scrolling ①white-space:nowrap;②display:inline-block;
Note:
①scroll-top is only used to set the position of the vertical scroll bar, and scroll-left is only used to set the position of the horizontal scroll bar
②If you want to use pull-down refresh, use page scrolling instead of scroll-view during development
Apps: Scrollable Navigation, Full Screen Scrolling
For relevant cases, see the introduction in the next section
Summary: View Container Components
①view view container
②swiper slider view container component and swiper-item slider component
③movable-area movable area component and movable-view movable view component
④scroll-view scrollable view area