微信小程序1，常用组件 view、swiper、swiper-item、 scroll-view、 icon、progress、text、rich-text、button、input、image

常用组件

view

类似于html中的div，是块级元素。

属性	说明
hover-class	为string类型，默认为none，指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	为boolean类型，默认为false，指定是否阻止本节点的祖先节点出现点击态
hover-start-time	为number类型，默认为50，按住后多久出现点击态，单位毫秒
hover-start-time	为number类型，默认为400，手指松开后点击态保留时间，单位毫秒

swiper

滑块视图容器，即轮播图最外面的容器。其中只可放置swiper-item组件，否则会导致未定义的行为，下方为常用属性，其他很多属性可以去官网看。

属性	说明
indicator-dots	为boolean类型，默认为false,是否显示面板指示点
indicator-color	指示点的颜色
indicator-active-color	当前选中指示点的颜色
autoplay	为boolean类型，默认为false，是否自动切换
current	为number类型，默认为0，当前滑块的index
interval	为number类型，默认为5000，自动切换时间间隔
duration	为number类型，默认为500，滑动动画时长
circular	为boolean类型，默认为false，是否为衔接滑动
display-multiple-items	为number类型，默认为1，同时显示的滑块数量

swiper-item

仅可放置在swiper组件中，宽高自动设置为100%。

属性	说明
item-id	为string类型，为该 swiper-item 的标识符
skip-hidden-item-layout	为boolean类型，默认为false，是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息

scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	说明
scroll-x	默认为false，是否允许横向滚动
scroll-y	默认为false，是否允许纵向滚动
show-scrollbar	默认为true，滚动条显隐控制 (同时开启 enhanced 属性后生效)
bindscroll	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
paging-enabled	默认为false，分页滑动效果 (同时开启 enhanced 属性后生效)
refresher-background	设置自定义下拉刷新区域背景颜色
refresher-default-style	设置自定义下拉刷新默认样式，支持设置 `black

icon

图标组件

属性	说明
type	icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。
color	icon的颜色，同 css 的color

progress

进度条。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

属性	说明
percent	百分比
show-info	默认为false，在进度条右侧显示百分比
font-size	右侧百分比字体大小
border-radius	圆角大小
color	进度条颜色
active	进度条从左往右的动画

text

文本，为行内元素，类似于html中的span

属性	说明
user-select	默认为false，文本是否可选，该属性会使文本节点显示为 inline-block

rich-text

富文本

属性	说明
nodes	节点列表/HTML String
user-select	文本是否可选，该属性会使节点显示为 block

nodes

现支持两种节点，通过 type 来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的 HTML 节点。

//HTML String渲染
const htmlSnip =
`<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>
`
//节点渲染
const nodeSnip =
`Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]
  }
})
`

button

属性	说明
size	default 默认大小； mini 小尺寸
type	primary 绿色；default 白色；warn 红色
–	–
plain	默认false，是否镂空
disabled	是否禁用
loading	名称前是否带 loading 图标
form-type	用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件；submit 提交表单；reset 重置表单

input

属性	说明
value	输入框的初始内容
text	text 文本输入键盘;number 数字输入键盘;idcard 身份证输入键盘;digit 带小数点的数字键盘;safe-password 密码安全输入键盘;nickname 昵称输入键盘
password	是否是密码类型
placeholder	输入框为空时占位符
disabled	是否禁用
focus	获取焦点
cursor-spacing	指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离

image

图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。

属性	说明
src	图片资源地址
mode	图片裁剪、缩放的模式(具体属性值在下方)
webp	为Boolean类型，默认不解析 webP 格式，只支持网络资源
lazy-load	boolean类型，图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
show-menu-by-longpress	默认为false，长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。
binderror	当错误发生时触发，event.detail = {errMsg}
bindload	当图片载入完毕时触发，event.detail = {height, width}

mode

属性值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域