Common view container class components

1view

         Normal view area

         Be similar to html Medium div, Is a block level element

         Commonly used to achieve the layout effect of the page

  <view>
     I am a view
  </view>

2.scroll-view

         Scrollable view area

         It is often used to achieve the effect of scrolling lists

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

3.swiper and swiper-item

The carousel chart container component and the carousel map item Components

<swiper class="swiper-container" indicator-dots="true" indicator-color="pink" indicator-active-color="orange" autoplay interval="1000" circular="true">
  <swiper-item>
    <view class="item">item1</view>
  </swiper-item>
  <swiper-item>
    <view class="item">item2</view>
  </swiper-item>
  <swiper-item>
    <view class="item">item3</view>
  </swiper-item>
</swiper>

swiper Component common properties

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

4.text Text component

         Be similar to HTML Medium span label , It's an in-line element

         adopt text Component's selectable attribute , Long press the selected text content

5.rich-text Rich text component

         Support 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

6.button

        Button components

        Functional ratio html Medium button Rich buttons

        adopt open-type Attribute can call various functions provided by wechat （ Customer service , forward , Get user authorization , Access to user information, etc ）

7.image

        Picture components

        image The default width of the component is about 300px, The height is about 200px

        image Of mode Property is used to specify the cropping and scaling mode of the picture , frequently-used mode The property values are as follows

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 the aspect ratio scaled , 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

8.navigator

        Page navigation component

        Be similar to html Medium a label