您的位置：首页 > 移动开发 > 微信开发

小程序文档整理之 -- 组件

2017-08-25 17:52 316 查看

视图容器
view - 视图容器

scroll-view - 可滚动视图区域

swiper - 滑块视图容器
swiper - 滑块视图容器

swiper-item

movable-area
movable-area

movable-view

cover-view
cover-view

cover-image

基础内容
icon 图标

text 文本

rich-text
rich-text 富文本

nodes

progress

表单
button

checkbox
checkbox-group

checkbox

form

input

label

picker

picker-view

radio

slider

switch

textarea

导航
navigator

媒体
audio

video

image

地图
map

画布
canvas

客服会话
contact-button

开放数据
open-data

视图容器

view - 视图容器


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

scroll-view - 可滚动视图区域


属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
bindscroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

注意：

1、请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

2、scroll-into-view 的优先级高于 scroll-top

3、在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh

4、若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部

swiper - 滑块视图容器


属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	000000	当前选中的指示点颜色
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在页面的 index
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否为纵向
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}

change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下

1、autoplay 自动播放导致swiper变化；

2、touch 用户划动引起swiper变化；

3、其他原因将用空字符串表示。

注意：其中只可放置组件，否则会导致未定义的行为。

Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
})
}
})

swiper-item

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

注意：

1、请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

2、如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停地调用，因而通常情况下请不要这样使用

movable-area

movable-view 的可移动区域

注意：movable-area 必须设置width和height属性，不设置默认为10px

movable-view

可移动的视图容器，在页面中可以拖拽滑动


属性名	类型	默认值	说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性
indicator-active-color	Boolean	false	超过可移动区域后，movable-view是否还可以移动
x	Number		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number		当定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值

1、movable-view 必须设置width和height属性，不设置默认为10px

2、movable-view 默认为绝对定位，top和left属性为0px

3、当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

注意：movable-view必须在组件中，并且必须是直接子节点，否则不能移动。

cover-view

覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas，支持嵌套。

cover-image

覆盖在原生组件之上的图片视图，可覆盖的原生组件同cover-view，支持嵌套在cover-view里。


属性名	类型	默认值	说明
src	String		图标路径，支持临时路径。暂不支持base64与网络地址。

注意：

1、只可嵌套在原生组件map、video、canvas内，避免嵌套在其他组件内。

2、事件模型遵循冒泡模型，但不会冒泡到原生组件

3、文本建议都套上cover-view标签，避免排版错误。

4、只支持基本的定位、布局、文本样式。不支持设置单边的border、opacity、background-image等。

5、建议子节点不要溢出父节点

6、暂不支持css动画。

基础内容

icon 图标


属性名	类型	默认值	说明
type	String		icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	Number	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

Page({
data: {
iconSize: [20, 30, 40, 50, 60, 70],
iconColor: [
'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple'
],
iconType: [
'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'
]
}
})

text 文本


属性名	类型	默认值	说明
selectable	Boolean	false	文本是否可选
space	String	false	显示连续空格
decode	Boolean	false	是否解码

space 有效值：ensp （中文字符空格一半大小）、emsp（中文字符空格大小）、nbsp（根据字体设置的空格大小）

注意：

1. decode可以解析的有 < > & '

2. 各个操作系统的空格标准并不一致。

3.

<text/>

组件内只支持

<text/>

嵌套。

rich-text

rich-text 富文本


属性名	类型	默认值	说明
nodes	Array / String	[]	节点列表 / HTML String

支持默认事件，包括：tap、touchstart、touchmove、touchcancel、touchend和longtap

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

nodes

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

<!-- rich-text.wxml -->
<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
<!-- rich-text.js -->
Page({
data: {
nodes: [{
type:'node',//元素节点(默认)
name: 'div', //标签名
attrs: { //属性
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{//子节点，结构和nodes一致

}]
}],
nodes2: [{
type:'text',//文本节点
text:'Hello World!'
}]
},
tap() {
console.log('tap')
}
})

受信任的HTML节点及属性

全局支持class和style属性，不支持id属性。


节点	属性
a、abbr、b、blockquote、br、code、dd、del、div、dl、dt、em、fieldset、h1~h6、hr、i、ins、label、legend、li、p、q、span、strong、sub、sup、tbody、tfoot、thead、tr、ul
col、colgroup	span，width
img	alt，src，height，width
table	width
td、th	colspan，height，rowspan，width

注意：
1.  nodes 不推荐使用 String 类型，性能会有所下降。
2.  rich-text 组件内屏蔽所有节点的事件。
3.  attrs 属性不支持 id ，支持 class 。
4.  name 属性大小写不敏感。
5.  如果使用了不受信任的HTML节点，该节点及其所有子节点将会被移除。
6.  img 标签仅支持网络图片。

progress

进度条


属性名	类型	默认值	说明
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
color	Color	09BB07	进度条颜色（请使用 activeColor）
activeColor	Color	无	已选择的进度条的颜色
backgroundColor	Color	无	未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画

示例：

<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />

表单

button

按钮


属性名	类型	默认值/值	说明	生效时机
size	String	default/mini	按钮的大小
type	String	default/primary/warn	按钮的样式类型
plain	Boolean	false	按钮是否镂空，背景色透明
disabled	Boolean	false	是否禁用
loading	Boolean	false	名称前是否带 loading 图标
form-type	String	submit/reset	用于 <form/> 组件，点击分别会触发 <form/> 组件的
open-type	String		微信开放能力
hover-class	String	button-hover[^footnote]	指定按钮按下去的样式类。当 hover-class=”none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	20	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	70	手指松开后点击态保留时间，单位毫秒
bindgetuserinfo	Handler		用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo	open-type=”getUserInfo’
session-from	String		会话来源	open-type=”contact”
send-message-title	String	当前标题	会话内消息卡片标题	open-type=”contact”
send-message-path	String	当前分享路径	会话内消息卡片点击跳转小程序路径	open-type=”contact”
send-message-img	String	截图	会话内消息卡片图片	open-type=”contact”
show-message-card	Boolean	false	显示会话内消息卡片	open-type=”contact”
bindcontact	Handler		客服消息回调	open-type=”getUserInfo’
bindgetphonenumber	Handler		获取用户手机号回调	open-type=”getphonenumber”

注1：button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}

open-type 有效值：


值	说明
contact	打开客服会话
share	触发用户转发，使用前建议先阅读使用指引
getUserInfo	获取用户信息，可以从bindgetuserinfo回调中获取到用户信息
getPhoneNumber	获取用户手机号，可以从bindgetphonenumber回调用获取到用户信息，解包方式

checkbox

checkbox-group

多项选择器，内部由多个checkbox组成


属性值	类型	说明
bindchange	EventHandle	<checkbox-group/> 中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目


属性名	类型	默认值	说明
value	String		<checkbox/> 标识，选中时触发 <checkbox-group/> 的 change 事件，并携带 <checkbox/> 的 value
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

form

表单，将组件内的用户输入的

<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>

提交。

当点击

<form/>

表单中 formType 为 submit 的

<button/>

组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。


属性名	类型	说明
report-submit	Boolean	是否返回 formId 用于发送模板消息
bindsubmit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ”}
bindreset	EventHandle	表单重置时会触发 reset 事件

input

label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：

<button/>, <checkbox/>, <radio/>, <switch/>

。


属性名	类型	说明
for	String	绑定控件的 id

picker

picker-view

radio

slider

switch

开关选择器


属性名	类型	默认值	说明
checked	Boolean	false	是否选中
type	String	switch	样式，有效值：switch, checkbox
bindchange	EventHandle		checked 改变时触发 change 事件，event.detail={ value:checked}
color	Color		switch 的颜色，同 css 的 color

textarea

navigator

媒体

audio

video

image

地图

map

画布

canvas

客服会话

contact-button

客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话


属性名	类型	默认值/值	说明
size	Number	18	会话按钮大小，有效值 18-27，单位：px
type	String	default-dark/default-light	会话按钮的样式类型
session-from	String		用户从该按钮进入会话时，开发者将收到带上本参数的事件推送。本参数可用于区分用户进入客服会话的来源。

相关API：详见客服消息接口文档

相关组件：button 组件通过设置 open-type=”contact” 亦可进入客服会话

开放数据

open-data

用于展示微信开放的数据


属性名	类型	值	说明
type	String	groupName(拉取群名称)	开放数据类型
open-gid	String		当 type=”groupName” 时生效, 群id

注意：

1、只有当前用户在此群内才能拉取到群名称

<open-data type="groupName" open-gid="xxxxxx"></open-data>

2、关于open-gid的获取请查看转发

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航