常用的视图容器类组件
view
普通视图区域,类似于HTML中的div，是一个块级元素常用来实现页面的布局效果。
WXML代码：
WXSS代码：
实现效果：
Flex布局传送门：【小程序】&【web前端】必备-Flex布局详解（弹性盒子）
scroll-view（滚动）
可滚动的视图区域，常用来实现滚动列表效果。
添加属性 scroll-y，即为纵向滚动。scroll-x，即为横向滚动。
WXML代码：
WXSS代码：
实现效果：
swiper和swiper-item（轮播图）
轮播图容器组件，轮播图item组件
swiper组件的常用属性
| 属性 | 类型 | 默认值 | 说明 |
indicator-dots |
boolean | false | 是否显示面板指示点 |
indicator-color |
color | rgba（0,0,0,3） | 指示点颜色 |
indicator-active-color |
color | #000000 | 当前选中的指示点颜色 |
autoplay |
boolean | false | 是否自动切换 |
interval |
number | 5000 | 自动切换时间间隔 |
circular |
boolean | false | 是否采用衔接滑动 |
WXML代码：
WXSS代码：
实现效果：
常用的基础内容组件
text
文本组件，类似于HTML中的span标签，是一个行内元素。
使用text组件并添加selectable属性可以实现长按选中的效果。
WXML代码：
实现效果：
rich-text
富文本组件，支持把HTML字符串渲染为WXML结构。
通过rich-text组件的nodes属性节点，把 HTML字符串渲染为对应的UI结构。
WXML代码：
实现效果：
其他常用组件
button
按钮组件，功能比HTML中的button按钮丰富，通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等)
三种按钮样式
普通按钮/主色调按钮/警告按钮，默认自动换行
样式：
小按钮（mini）
设置size="mini"即可，设置之后不换行
样式：
镂空按钮（plain）
去除背景色。添加plain属性即可。
样式：
image
图片组件，image 组件默认宽度约300px、高度约240px
通过src属性添加图片地址：
image的mode属性
| mode值 | 说明 |
scaleToFill |
(默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素 |
aspectFit |
缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
aspectFill |
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
widthFix |
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
heightFix |
缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
下面我们来看看效果：
- scaleToFill
- aspectFill
- aspectFit
- widthFix
- heightFix
