6、常用组件

  小程序中常用的布局组件有：view，text，rich-text，button，image，navigator，icon，swiper，radio，checkbox等。

1. view

  类似css中的div标签。

2. text

  文本标签，只能嵌套文本标签，长按文字可以复制（只有该标签有这个功能），可以对空格 回车进行编码。
案例：
代码：

<!--pages/demo02/demo02.wxml-->
<!--selectable:设置文本是否可以被选中
    decode：设置内容是否被解码-->
<text selectable decode>
  text  &nbsp;  123 &lt;
</text>

运行截图：

3. image

  图片标签，image组件默认宽度320px，高度240px，支持 JPG、PNG、SVG、WEBP、GIF 等格式。
  支持懒加载。给标签加上lazy-load属性时，lazy-load会自己判断，当图片出现在视口上下 三屏的高度之内的时候，自己开始加载图片。
mode有效值：mode有13种模式，其中4种缩放，9种是裁剪模式。
代码：

<!--pages/demo02/demo02.wxml-->
<image mode="aspectFit" lazy-load src="../../icon/_sousuo.png"/>

项目文件树形结构图：
运行截图：

4. swiper

  轮播图组件，轮播图外层容器swiper，每一个轮播项 swiper-item。
  swiper存在默认样式，width=100%，height=150px；swiper的高度无法由内容撑开。
  swiper适应图片宽高：先找出 原图的宽和高，等比例 给swiper定 宽度和高度。
案例：图片尺寸为200px*200px
项目文件树形结构图：

代码：

<!--pages/demo02/demo02.wxml-->
<swiper>
  <swiper-item><image mode="widthFix" src="../../icon/_sousuo.png"/></swiper-item>
  <swiper-item><image mode="widthFix" src="../../icon/_wode.png"/></swiper-item>
  <swiper-item><image mode="widthFix" src="../../icon/_zhuye.png"/></swiper-item>
</swiper>

/* pages/demo02/demo02.wxss */
swiper{
  width: 100%;
  height:calc(100vw*200/200);
}
image{
  width:100%;
}

运行截图：

swiper常见属性

属性	类型	默认值	说明
autoplay	boolean	false	是否自动切换
interval	number	5000	自动切换时间间隔
circular	boolean	false	是否采用衔接滑动
indicator-dots	boolean	false	是否显示面板指示点
indicator-color	color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	color	#000000	当前选中的指示点颜色

案例：轮播显示三张图，（文件结构与上面轮播结构一样）
代码：

<!--pages/demo02/demo02.wxml-->
<swiper autoplay interval="1000" circular indicator-dots="true" indicator-color="#0094FF" indicator-active-color="#ff0094">
  <swiper-item><image mode="widthFix" src="../../icon/_sousuo.png"/></swiper-item>
  <swiper-item><image mode="widthFix" src="../../icon/_wode.png"/></swiper-item>
  <swiper-item><image mode="widthFix" src="../../icon/_zhuye.png"/></swiper-item>
</swiper>

/* pages/demo02/demo02.wxss */
swiper{
  width: 100%;
  height:calc(100vw*200/200);
}
image{
  width:100%;
}

运行截图：

5. navigator

  navigator：导航标签，类似超链接标签 。块级元素，默认有换行。
属性介绍：

属性	描述
url	值为要跳转的页面路径，可以是绝对路径，也可以是相对路径。注意路径值中斜杠为左斜杠且文件不要后缀名
target	默认值为self，miniProgram为其他的小程序
open-type	默认为navigate，跳转方式

open-type的有效值

值	说明
navigate	保留当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面，对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	关闭当前页面，跳转到应用内的某个页面，但是不能跳到tabbar页面，对应 wx.redirectTo 的功能
switchTab	跳转到tabbar页面，并关闭所有非tabbar页面，对应 wx.switchTab 的功能
reLaunch	关闭所有页面，其他页面（包括tabbar页面）随便跳转，对应 wx.reLaunch 的功能
navigateBack	关闭当前页面，返回上一页面，可通过getCurrentPages（）获取当前的页面栈，决定要返回几层。对应 wx.navigateBack 的功能
exit	退出小程序，target="miniProgram"时生效

案例：
文件树形结构图：

<!--pages/demo03/demo03.wxml-->
<navigator url="/pages/demo02/demo02">导航栏页面</navigator>
<navigator url="/pages/demo02/demo02" open-type="redirect">导航栏页面</navigator>
<navigator url="/pages/index/index" open-type="switchTab">主页tabbar页面</navigator>

运行截图：

6.rich-text

  rich-text:富文本标签，具体内容请转官网链接：小程序rich-text官方文档介绍。