Summary of common components of applet

Common view container class components

view

1. Similar to HTML Medium div, It's a Block-level elements
2. Commonly used to achieve the layout effect of the page
3. Normal view area

scroll-view

1. Scrollable view area
2. It is often used to achieve the effect of scrolling lists

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

.container1 {
    
    /* display: flex; justify-content: space-around; */
    border: 1px solid #ccc;
    width: 100px;
    height: 120px;
}
.container1 view {
    
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
}
.container1 view:nth-child(1) {
    
    background-color: lightgreen;
}
.container1 view:nth-child(2) {
    
    background-color: blue;
}
.container1 view:nth-child(3) {
    
    background-color: pink;
}

The effect is as follows :

swiper and swiper-item

The carousel chart container component and the carousel map item Components

<swiper class="swiper_container" indicator-dots indicator-color="#fff" indicator-active-color="gray" autoplay="true" interval="2000" circular>
    <swiper-item>
        <view class="item">A</view>
    </swiper-item>
    <swiper-item>
        <view class="item">B</view>
    </swiper-item>
    <swiper-item>
        <view class="item">C</view>
    </swiper-item>
</swiper>

.swiper_container {
    
    height: 150px;
}
.item {
    
    height: 100%;
    line-height: 150px;
    text-align: center;
}
swiper-item:nth-child(1) .item {
    
    background-color: green;
}
swiper-item:nth-child(2) .item {
    
    background-color: rgb(68, 227, 248);
}
swiper-item:nth-child(3) .item {
    
    background-color: rgb(233, 35, 134);
}

The effect is as follows :

Other commonly used components

button

1. Button components
2. Functional ratio HTML Medium button Rich buttons
3. adopt open-type Attribute can call various functions provided by wechat ( Customer service 、 forward 、 Get user authorization 、 Access to user information, etc )

Simple demo：

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

<view>~~~~~~~~ adopt type Specify the button type ~~~~~~~~</view>
<button> Ordinary button </button>
<button type="primary"> Main tone button </button>
<button type="warn"> Warning button </button>

<view>~~~~~~~ adopt size="mini" Small size buttons ~~~~~~~</view>
<button size="mini"> Ordinary button </button>
<button type="primary" size="mini"> Main tone button </button>
<button type="warn" size="mini"> Warning button </button>

<view>~~~~~~~plain Hollow button ~~~~~~~</view>
<button size="mini" plain> Ordinary button </button>
<button type="primary" size="mini" plain> Main tone button </button>
<button type="warn" size="mini" plain> Warning button </button>

image

1. Picture components
2. image The default width of the component is 300px、 The height is 240px

navigator( To be added )

1. Page navigation component
2. Be similar to HTML Medium a link

text

Text component , amount to html Medium span label , One of its properties selectable It can achieve the effect of long press to select

rich-text

This text component has a property :nodes,nodes You can write some view labels in , And you can write some styles directly

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