😶🌫️常用的视图容器类组件★
① view
- 普通视图区域
- 类似于 HTML 中的 div，是一个块级元素
- 常用来实现页面的布局效果
② scroll-view
- 可滚动的视图区域
- 常用来实现滚动列表效果
③ swiper 和 swiper-item
- 轮播图容器组件 和 轮播图 item 组件
😶🌫️view 组件的基本使用★
简单实现如图的 flex 横向布局效果：
WXML代码如下
WXSS代码如下：
scroll-view简单使用
基于 View组件修改成 scroll-view 👉 3步走：1、修改标签 👉 2、添加滚动属性（scroll-y || scroll-x （允许横向||允许纵向）） 👉 1、注意❗:使用竖向滚动时，必须给scroll-view 一个固定的高度🆗？
WXML代码如下：
WXSS代码如下：
- swiper 和 swiper-item简单使用
😶🌫️swiper 组件的常用属性
- WXML
- WXSS
- 效果如下
😶🌫️常用的基础内容组件★
① text
- 文本组件
- 类似于 HTML 中的 span 标签，是一个行内元素
☆：. text 组件的基本使用 👉 通过 text 组件的 selectable 属性，实现长按选中文本内容的效果： 如👇
☆：. rich-text 组件的基本使用
- 富文本组件
- 支持把 HTML 字符串渲染为 WXML 结构
通过 rich-text 组件的 nodes 属性节点，把 HTML 字符串渲染为对应的 UI 结
构：如👇
😶🌫️其它常用组件★
① button
- 按钮组件
- 功能比 HTML 中的 button 按钮丰富
- 通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
- 简单使用如 👇：
② image
- 图片组件
- image 组件默认宽度约 300px、高度约 240px
- 组件的基本使用如下：
错了 - image 组件的 mode 属性
image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：
| mode 值 | 说明 |
| scaleToFill | （默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
效果如下：
③ navigator（后文详细简介）
- 页面导航组件
- 类似于 HTML 中的 a 链接
最后
下篇文章再见ヾ(￣▽￣)ByeBye
