[wechat applet] view container and basic content components

Developers can quickly build a page structure by using components , Components are also introduced in the previous chapter , So this article Niuniu will take you to learn the components of small programs .
We can understand components as tags embedded in wechat , Its role in the applet is similar to HTML The label is consistent , However, the functions of components are more diverse 、 Specifically .
This matter should not be delayed , Let's go ！

One , View container class components

1.1 view

• Normal view container , In the wechat applet ,view Equivalent to HTML Medium div label , Belongs to block level elements

• view Because of its meaninglessness , It is often used to make the layout of the general framework of small programs

chestnuts ：

The vertical layout is realized as follows
wxml file

<view class="column">
  <view class="view-1 box"></view>
  <view class="view-2 box"></view>
  <view class="view-3 box"></view>
</view>

wxss file

.column{
    
  margin: 0 auto;
  width: 100px;
}
.view-1{
    
  background-color: lightblue;
}
.view-2{
    
  background-color: lightcoral;
}
.view-3{
    
  background-color: lightgreen;
}
.box{
    
  width: 100px;
  height: 100px;
}

view There are no default styles for components , It is very suitable for use as a layout structure , Such as grid layout ,flex Layout and so on .
effect ：

1.2 srcoll-view

• Relative to view,scroll-view More scrollable functions ,scroll-view This is called a scrollable view area
• It is generally used to realize the list scrolling function of small programs
• Common properties ：
  1. scroll-x, Allow horizontal scrolling
  2. scroll-y, Allow vertical scrolling
  3. bindscrolltoupper Scroll to top / Left trigger
  4. bindscrolltolower Scroll to the bottom / Right trigger

bindscrolltoupper and bindscrolltolower Generally, it is used together with event binding , Events are the communication between the rendering layer and the logic layer , User generated behavior on the render layer , The logic layer responds to this behavior .

chestnuts ：
wxml file

<scroll-view class="scroll" scroll-y>
  <view class="box view-1"></view>
  <view class="box view-2"></view>
  <view class="box view-3"></view>
</scroll-view>

wxss file

.scroll{
    
  width: 100px;
  height: 120px;
}
.box{
    
  width: 100px;
  height: 100px;
}
.view-1{
    
  background-color: lightgreen;
}
.view-2{
    
  background-color: lightpink;
}
.view-3{
    
  background-color: lightskyblue;
}

effect ：

Of course you can scroll-y Attribute to scroll-x, Roll horizontally

1.3 swiper and swiper-item

• swiper, Slider view container , You can set the elements for sliding playback , It should be noted that , Can only be placed inside swiper-item label , Otherwise, it will lead to undefined behavior .
• swiper-item, It can only be placed in swiper, Be careful , Its width and height are automatically set to 100%.
• It is generally used to set the rotation chart
• Common properties ：
  1. indicator-dots Set whether to use the panel to indicate points , The default is false
  2. indicator-color Color of panel indication points , The default value is rgba(0,0,0,.3)
  3. indicator-color The currently selected indicator color , The default value is #000
  4. autoplay Whether to automatically switch pictures , The default is false
  5. interval Time interval of automatic switching , The default is 5000ms
  6. circular Whether to select connection sliding ,== That is, when you slide to the last picture , Is it allowed to move the next one back to the first one , The default value is false

Rotation map chestnut ：
wxml file

<swiper class="container" indicator-dots="true" autoplay="true" circular="true" >
<swiper-item class="box item-1">
<view></view>
</swiper-item>
<swiper-item class="box item-2">
<view></view>
</swiper-item>
<swiper-item class="box item-3">
<view></view>
</swiper-item>
</swiper>

wxss file

.container{
    
  height: 200px;
}
.box{
    
  height: 100%;
}
.item-1{
    
  background-color: lightgreen;
}
.item-2{
    
  background-color: lightpink;
}
.item-3{
    
  background-color: lightgray;
}

That's it , We realized the rotation map , Compared to using... On the web JS Complex operation of , This low code implementation is not very comfortable , In order to improve efficiency , Low code will also be the trend in the future

effect ：

The view container component also has drag and drop views movable-area, Pop up view page-container, If you are interested, you can learn something about

---

Two , Basic content components

2.1 text

• The content description is the host text , Is a text component , You can think of it as an applet span label , because text It's also an in-line element .
• Common properties ：
  1. user-select , Is text optional , If you can copy , Be careful ： This attribute enables the text component to be displayed as inline-block

2.2 rich-text

• The content description is rich text , We can go through nodes attribute , hold HTML Render the string to the corresponding UI structure
  As shown below ：

<rich-text nodes="<h1 style='color: lightblue'> title </h1>"></rich-text>

The effect is as follows ：

This is the end of the article , The next preview is to explain the form components and make a small case , If you think the article is useful to you, you can pay attention to Niuniu's subsequent updates , Thank you for your support ！

Debt see ~