Introduction to basic components of wechat applet

Catalog

1、 View container view

2、 Scroll view container scroll-view

3. Shuffling figure swiper&swiper-item

 4. Text component text& Rich text component rich-text

5. Button components button

6. Picture components image

---

1、 View container view

• Normal view area
• Be similar to HTML Medium div, Is a block level element
• Commonly used to achieve the layout effect of the page

  

Page structure ：

<!--pages/view/view.wxml-->
<view class="container1">
      <view>A</view>
      <view>B</view>
      <view>C</view>
</view>

  Page style ：

/* pages/view/view.wxss */
.container1 view{
    width: 100px;/* The width and height of the box */
    height: 100px;
    text-align: center;/* centered */
    line-height: 100px; /* Line spacing of text */
}
.container1 view:nth-child(1){
    background-color:lightcoral;/* Set the background color of the sub block */
}
.container1 view:nth-child(2){
    background-color: lightgreen;
}
.container1 view:nth-child(3){
    background-color: magenta;
}
.container1{
    display: flex;/* Box horizontal layout */
    justify-content: space-around;/* Decentralized layout */
}

2、 Scroll view container scroll-view

• Scrollable view area
• It is often used to achieve the effect of scrolling lists

 

  Page structure ：

<!--pages/view/view.wxml-->
<!-- scroll-x  Roll horizontally  scroll-y  Roll vertically  -->
<scroll-view class="container1" scroll-y>
      <view>A</view>
      <view>B</view>
      <view>C</view>
</scroll-view>

Page style ：

/* pages/view/view.wxss */
.container1 view{
    width: 100px;/* The width and height of the box */
    height: 100px;
    text-align: center;/* centered */
    line-height: 100px; /* Line spacing of text */
}
.container1 view:nth-child(1){
    background-color:lightcoral;/* Set the background color of the sub block */
}
.container1 view:nth-child(2){
    background-color: lightgreen;
}
.container1 view:nth-child(3){
    background-color: magenta;
}
.container1{
    /* The border line of the package scroll list and its width */
   border :1px solid red;
   width: 100px;
   /* Give it a mandatory height , The part beyond this height will be scrolled */
    height: 130px; 

}

3. Shuffling figure swiper&swiper-item

• Slider view container
• Built in swiper-item Components
• It is generally used to realize the automatic playback and display of pictures （ Here we use view Block instead of display ）

  Page structure ：

<!--pages/swiper/swiper.wxml-->
<text> Effect display of rotation picture </text>
<!--  Structure of rotation chart  , The outermost layer is a wrapping container -->
<swiper class="swiper-container" indicator-dots indicator-color="white" autoplay circular>
      <!--  The first rotating picture  -->
    <swiper-item>
      <view class="item">A</view>
    </swiper-item>
    <!--  The second rotating picture  -->
    <swiper-item>
       <view class="item">B</view>
    </swiper-item>
    <!--  The third rotating picture  -->
    <swiper-item>
       <view class="item">C</view>
    </swiper-item>
</swiper>

Page style ：

/* pages/swiper/swiper.wxss */
.swiper-container{
    height: 150px;
}
.item{
    height: 100%;
    line-height: 150px;
    text-align: center;
}
swiper-item:nth-child(1) .item{
    background-color: lightblue;
}
swiper-item:nth-child(2) .item{
    background-color: lightgreen;
}
.swiper-item:nth-child(3) .item{
    background-color: lightseagreen;
}

Some other common properties

 4. Text component text& Rich text component rich-text

• text Be similar to HTML Medium span label , It's an in-line element
• text It can realize the function of long press to select and copy （ Only use text）
• rich-text Can pass nodes Attribute node , hold HTML Render the string to the corresponding UI structure

  Page structure ：

<!-- Text text And rich text rich-text The presentation of -->
<text> Text text：</text>
<view>
 The mobile phone number supports the long press selection effect ：
<!-- selectable Property indicates that the text can be selected by long pressing , And only in text Only in the label  -->
<text selectable>1234567896</text>
</view>
<text> Rich text rich-text：</text>
<rich-text nodes="<h1 style='color:red;'>hello world</h1>"></rich-text>

attribute

 

5. Button components button

• Its functional ratio HTML Medium button Enrich
• Can pass open-type Attribute can call various functions provided by wechat （ Customer service 、 forward 、 Get the user's authorization 、 Get user information 、 Open location services, etc ）

  Page structure ：

<view>---------- adopt type Property specifies the button type ---------</view>
<button> Default button </button>
<button type="primary"> Main tone button </button>
<button type="warn"> Warning button </button>
<view>---------- Set up size=mini Become a small button ---------</view>
<button size="mini"> Default button </button>
<button type="primary" size="mini"> Main tone button </button>
<button type="warn" size="mini"> Warning button </button>
<view>---------- Set up plain Property becomes “ Hollowing out ” Type button ---------</view>
<button size="mini" plain=""> Default button </button>
<button type="primary" size="mini" plain> Main tone button </button>
<button type="warn" size="mini" plain=""> Warning button </button>

attribute

 

6. Picture components image

• Used to show image elements
• The default width of the component is about 300px, The height is about 240px

  Page structure ：

<!--pages/image/image.wxml-->
<text> Add a picture presentation </text>
<!-- heightFix Fixed height , Width adaptively fills the border area  -->
<image src="/images/2.jfif" mode="heightFix"></image>
<!-- widthFix Fixed width , Fill the border area with height adaptation  -->
<image src="/images/2.jfif" mode="widthFix"></image>   

attribute

 

image mode Important attributes