小程序组件的基本使用

1、组件

1.1、小程序中组件的分类

小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构

• 视图容器
• 基础内容
• 表单事件
• 导航组件
• 媒体组件
• map地图组件
• canvas画布组件
• 开放能力
• 无障碍访问

1.2、常用的视图容器类组件

①view

• 普通视图区域
• 类似于HTML中的div，是一个块级元素
• 常用来实现页面的布局效果

②scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

③swiper和swiper-item

• 轮播图容器组件和轮播图item组件

1.3、view组件的基本使用

实现flex横向布局效果：

1.4、scroll-view组件的基本使用

实现纵向滚动效果：

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

实现轮播效果：

1.6、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	是否采用衔接滑动

1.7、常用的基础内容组件

①text

• 文本组件
• 类似于HTML中的span标签，是一个行内元素

②rich-text

• 富文本组件
• 支持把HTML字符串渲染为WXML结构

1.8、text组件的基本使用

通过text组件的selectable属性，实现长按选中文本内容的效果

注：selectable属性若无法使用，可换为user-select属性

<!-- 常用的基础内容组件text的用法 -->
<view>
  <text user-select="true">hello world</text>
</view>

1.9、rich-text组件的基本使用

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

<!-- 常用的基础内容组件rich-text的用法 -->
<!-- 应用场景：商品详情页的结构渲染 --> 
<rich-text nodes="<h1 style='color:red;'>hello world</h1>"></rich-text>

1.10、其他常用组件

①button

• 按钮组件
• 功能比HTML中的button按钮丰富
• 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）

②image

• 图片组件
• image组件默认宽度约300px、高度约240px

③navigator

• 页面导航组件
• 类似于HTML中的a链接

1.11、button按钮的基本使用

1.12、image组件的mode属性

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

mode值	说明
scaleToFill	（默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方 向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变