上篇文章中，我们了解到，小程序的组件也是由宿主环境提供的。开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分为9大类，分别是：

本篇文章，我们将学习小程序常用组件view｜scroll-view｜swiper｜swiper-item｜text｜rich-text｜button｜image等组件的基本用法以及API的三大分类。

常用的视图容器组件

1. view

2. scroll-view

3. swiper和swiper-item

view组件的基本使用

需求：实现如图的flex横向布局效果

1. 编写WXML页面代码（牢记div ⇒ view）

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

2. 编写WXSS样式代码（使用CSS3选择器以及flex布局）

/* pages/list/list.wxss */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1) {
  background-color: lightgreen;
}
.container1 view:nth-child(2) {
  background-color: lightskyblue;
}
.container1 view:nth-child(3) {
  background-color: lightpink;
}
.container1 {
  display: flex;
  justify-content: space-around;
}

3. 刷新模拟器查看效果

scroll-view组件的基本使用

需求：实现如图的纵向滚动效果

1. 编写WXML中的scroll-view标签，并给其一个scroll-y属性代表垂直滚动

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

2. 编写WXSS样式，在之前讲解view的样式的基础上，为container1类增加一个最大高度为120px即可。

swiper和swiper-item组件的基本使用

需求：实现如图的轮播图效果

1. 编写WXML页面代码

<!-- 轮播图区域 -->
<!-- indicator-dots：显示面板指示点 -->
<swiper class="swiper-container" indicator-dots>
  <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>

2. 编写WXSS样式代码

/* pages/list/list.wxss */
.swiper-container {
  height: 150px; /* 轮播图容器的高度 */
}
.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) {
  background-color: lightgreen;
}
swiper-item:nth-child(2) {
  background-color: lightskyblue;
}
swiper-item:nth-child(3) {
  background-color: lightpink;
}

swiper 组件的常用属性

常用的基础内容组件

1. text

2. rich-text

text组件的基本使用

需求：通过 text 组件的user-select属性，实现长按选中文本内容的效果

rich-text组件的基本使用

通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构

rich-text组件提供了一个nodes属性，可以在nodes属性中放置html标签内容（有点类似JSX，只不过JSX是在JS文件中放置html标签）。

值得注意的是：nodes内容使用了双引号，那么内部的行内样式，就不能使用双引号，必须使用单引号。

其他常用组件

1. button

2. image

3. navigator

button按钮的基本使用

除了图中的一些api之外，还支持我们网页开发中的WebView属性。

包括但不限于：

disabled / loading / form-type(submit / reset) 等等……

按钮组件的使用中，还可以依赖于微信开放的官方API。

image组件的基本使用

image组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下：

WXSS样式：

/* pages/list/list.wxss */
image {
  border: 1px red solid;
}

小程序 API 三大分类

1. 事件监听API

2. 同步API

3. 异步API