微信小程序組件說明表

基礎組件

框架為開發者提供了一系列基礎組件，開發者可以通過組合這些基礎組件進行快速開發。

什么是組件：

組件是視圖層的基本組成單元。
組件自帶一些功能與微信風格的樣式。
一個組件通常包括開始標簽和結束標簽，屬性用來修飾這個組件，內容在兩個標簽之內。

<tagname property="value">
  Content goes here ...
</tagename>

屬性類型

類型	描述	注解
Boolean	布爾值	組件寫上該屬性，不管該屬性等于什么，其值都為true，只有組件上沒有寫該屬性時，屬性值才為false。如果屬性值為變量，變量的值會被轉換為Boolean類型
Number	數字	1, 2.5
String	字符串	“string”
Array	數組	[ 1, “string” ]
Object	對象	{ key: value }
EventHandler	事件處理函數名	“handlerName” 是 Page中定義的事件處理函數名
Any	任意屬性

共同屬性類型

屬性	類型	描述	注解
id	String	組件的唯一標示	保持整個頁面唯一
class	String	組件的樣式類	在對應的 WXSS 中定義的樣式類
style	String	組件的內聯樣式	可以動態設置的內聯樣式
hidden	String	組件是否顯示	所有組件默認顯示
data-*	Any	自定義屬性	組件上觸發的事件時，會發送給事件處理函數
bind* / catch*	EventHandler	組件的事件

基本組件列表

基礎組件分為以下幾類：

視圖容器(View Container) 基礎內容(Basic Content) 表單(Form) 導航(Navigation) 多媒體(Media) 地圖(Map) 畫布(Canvas)

視圖容器(View Container)：

組件名	注釋	組件屬性
組件名	注釋	屬性名	類型	默認值	說明	最低版本
view	視圖容器	hover-class	String	none	指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果
		hover-stop-propagation	Boolean	false	指定是否阻止本節點的祖先節點出現點擊態	1.5.0
		hover-start-time	Number	50	按住后多久出現點擊態，單位毫秒
		hover-stay-time	Number	400	手指松開后點擊態保留時間，單位毫秒
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}
swiper	滑塊視圖容器	indicator-dots	Boolean	false	是否顯示面板指示點
		indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色	1.1.0
		indicator-active-color	Color	#000000	當前選中的指示點顏色	1.1.0
		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}

基礎內容(Basic Content)：

組件名	注釋	組件屬性
組件名	注釋	屬性名	類型	默認值	說明	最低版本
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
text	文字	selectable	Boolean	false	文本是否可選	1.1.0
		space	String	false	顯示連續空格有效值 ensp:中文字符空格一半大小 emsp:中文字符空格大小 nbsp:根據字體設置的空格大小	1.4.0
		decode	Boolean	false	是否解碼	1.4.0
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	進度條從左往右的動畫
		active-mode	String	backwards	backwards: 動畫從頭播；forwards：動畫從上次結束點接著播	1.7.0

表單(Form)：

組件名	注釋	組件屬性
組件名	注釋	屬性名	類型	默認值	說明	生效時機	最低版本
button	按鈕	size	String	default	按鈕的大小
		type	String	default	按鈕的樣式類型
		plain	Boolean	false	按鈕是否鏤空，背景色透明
		disabled	Boolean	false	是否禁用
		loading	Boolean	false	名稱前是否帶 loading 圖標
		form-type	String		用于 <form/> 組件，點擊分別會觸發 <form/> 組件的 submit/reset 事件
		open-type	String		微信開放能力		1.1.0
		hover-class	String	button-hover	指定按鈕按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果
		hover-stop-propagation	Boolean	false	指定是否阻止本節點的祖先節點出現點擊態		1.5.0
		hover-start-time	Number	20	按住后多久出現點擊態，單位毫秒
		hover-stay-time	Number	70	手指松開后點擊態保留時間，單位毫秒
		bindgetuserinfo	Handler		用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數的detail中獲取到的值同wx.getUserInfo	open-type="getUserInfo'	1.3.0
		lang	String	en	指定返回用戶信息的語言，zh_CN 簡體中文，zh_TW 繁體中文，en 英文。	open-type="getUserInfo"	1.3.0
		session-from	String		會話來源	open-type="contact"	1.4.0
		send-message-title	String	當前標題	會話內消息卡片標題	open-type="contact"	1.5.0
		send-message-path	String	當前分享路徑	會話內消息卡片點擊跳轉小程序路徑	open-type="contact"	1.5.0
		send-message-img	String	截圖	會話內消息卡片圖片	open-type="contact"	1.5.0
		show-message-card	Boolean	false	顯示會話內消息卡片	open-type="contact"	1.5.0
		bindcontact	Handler		客服消息回調	open-type="contact"	1.5.0
		bindgetphonenumber	Handler		獲取用戶手機號回調	open-type="getphonenumber"	1.2.0
form	表單	report-submit	Boolean		是否返回 formId 用于發送模板消息
		bindsubmit	EventHandle		攜帶 form 中的數據觸發 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
		bindreset	EventHandle		表單重置時會觸發 reset 事件
input	輸入框	value	String		輸入框的初始內容
		type	String	"text"	input 的類型
		password	Boolean	false	是否是密碼類型
		placeholder	String		輸入框為空時占位符
		placeholder-style	String		指定 placeholder 的樣式
		placeholder-class	String	"input-placeholder"	指定 placeholder 的樣式類
		disabled	Boolean	false	是否禁用
		maxlength	Number	140	最大輸入長度，設置為 -1 的時候不限制最大長度
		cursor-spacing	Number	0	指定光標與鍵盤的距離，單位 px 。取 input 距離底部的距離和 cursor-spacing 指定的距離的最小值作為光標與鍵盤的距離
		auto-focus	Boolean	false	(即將廢棄，請直接使用 focus )自動聚焦，拉起鍵盤
		focus	Boolean	false	獲取焦點
		confirm-type	String	"done"	設置鍵盤右下角按鈕的文字		1.1.0
		confirm-hold	Boolean	false	點擊鍵盤右下角按鈕時是否保持鍵盤不收起		1.1.0
		cursor	Number		指定focus時的光標位置		1.5.0
		bindinput	EventHandle		當鍵盤輸入時，觸發input事件，event.detail = {value, cursor}，處理函數可以直接 return 一個字符串，將替換輸入框的內容。
		bindfocus	EventHandle		輸入框聚焦時觸發，event.detail = {value: value}
		bindblur	EventHandle		輸入框失去焦點時觸發，event.detail = {value: value}
		bindconfirm	EventHandle		點擊完成按鈕時觸發，event.detail = {value: value}
checkbox	多項選擇器	value	String		<checkbox/>標識，選中時觸發<checkbox-group/>的 change 事件，并攜帶 <checkbox/> 的 value
		disabled	Boolean	false	是否禁用
		checked	Boolean	false	當前是否選中，可用來設置默認選中
		color	Color		checkbox的顏色，同css的color
radio	單項選擇器	value	String		<radio/> 標識。當該<radio/> 選中時，<radio-group/> 的 change 事件會攜帶<radio/>的value
		disabled	Boolean	false	是否禁用
		checked	Boolean	false	當前是否選中，可用來設置默認選中
		color	Color		radio的顏色，同css的color
picker (mode = selector)	(普通)列表選擇器	range	Array / Object Array	[]	mode為 selector 或 multiSelector 時，range 有效
		range-key	String		當 range 是一個 Object Array 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容
		value	Number	0	value 的值表示選擇了 range 中的第幾個（下標從 0 開始）
		bindchange	EventHandle		value 改變時觸發 change 事件，event.detail = {value: value}
		disabled	Boolean	false	是否禁用
picker (mode = multiSelector)	(多列)列表選擇器	range	二維Array / 二維Object Array	[]	mode為 selector 或 multiSelector 時，range 有效。二維數組，長度表示多少列，數組的每項表示每列的數據，如[["a","b"], ["c","d"]]
		range-key	String		當 range 是一個二維Object Array 時，通過 range-key 來指定 Object 中 key 的值作為選擇器顯示內容
		value	Array	0	value 每一項的值表示選擇了 range 對應項中的第幾個（下標從 0 開始）
		bindchange	EventHandle		value 改變時觸發 change 事件，event.detail = {value: value}
		bindcolumnchange	EventHandle		某一列的值改變時觸發 columnchange 事件，event.detail = {column: column, value: value}，column 的值表示改變了第幾列（下標從0開始），value 的值表示變更值的下標
		disabled	Boolean	false	是否禁用
picker (mode = time)	(時間)列表選擇器	value	String		表示選中的時間，格式為"hh:mm"
		start	String		表示有效時間范圍的開始，字符串格式為"hh:mm"
		end	String		表示有效時間范圍的結束，字符串格式為"hh:mm"
		bindchange	EventHandle		value 改變時觸發 change 事件，event.detail = {value: value}
		disabled	Boolean	false	是否禁用
picker (mode = date)	(日期)列表選擇器	value	String	0	表示選中的日期，格式為"YYYY-MM-DD"
		start	String		表示有效日期范圍的開始，字符串格式為"YYYY-MM-DD"
		end	String		表示有效日期范圍的結束，字符串格式為"YYYY-MM-DD"
		fields	String	day	有效值 year,month,day，表示選擇器的粒度
		bindchange	EventHandle		value 改變時觸發 change 事件，event.detail = {value: value}
		disabled	Boolean	false	是否禁用
picker (mode = region)	(日期)列表選擇器	value	Array	[]	表示選中的省市區，默認選中每一列的第一個值
		custom-item	String		可為每一列的頂部添加一個自定義的項		1.5.0
		bindchange	EventHandle		value 改變時觸發 change 事件，event.detail = {value: value}
		disabled	Boolean	false	是否禁用
picker-view	內嵌列表選擇器	value	NumberArray		數組中的數字依次表示 picker-view 內的 picker-view-colume 選擇的第幾項（下標從 0 開始），數字大于 picker-view-column 可選項長度時，選擇最后一項。
		indicator-style	String		設置選擇器中間選中框的樣式
		indicator-class	String		設置選擇器中間選中框的類名		1.1.0
		mask-style	String		設置蒙層的樣式		1.5.0
		mask-class	String		設置蒙層的類名		1.5.0
		bindchange	EventHandle		當滾動選擇，value 改變時觸發 change 事件，event.detail = {value: value}；value為數組，表示 picker-view 內的 picker-view-column 當前選擇的是第幾項（下標從 0 開始）
slider	滾動選擇器	min	Number	0	最小值
		max	Number	100	最大值
		step	Number	0	步長，取值必須大于 0，并且可被(max - min)整除
		disabled	Boolean	false	是否禁用
		value	Number	0	當前取值
		color	Color	#e9e9e9	背景條的顏色（請使用 backgroundColor）
		selected-color	Color	#1aad19	已選擇的顏色（請使用 activeColor）
		activeColor	Color	#1aad19	已選擇的顏色
		backgroundColor	Color	#e9e9e9	背景條的顏色
		show-value	Boolean	false	是否顯示當前 value
		bindchange	EventHandle		完成一次拖動后觸發的事件，event.detail = {value: value}
		bindchanging	EventHandle		拖動過程中觸發的事件，event.detail = {value: value}		1.7.0
switch	開關選擇器	checked	Boolean	false	是否選中
		type	String	switch	樣式，有效值：switch, checkbox
		bindchange	EventHandle		checked 改變時觸發 change 事件，event.detail={ value:checked}
		color	Color		switch 的顏色，同 css 的 color
label	標簽	for	String		綁定控件的 id

組件名	注釋	組件屬性
組件名	注釋	屬性名	類型	默認值	說明	最低版本
navigator	應用鏈接	url	String		應用內的跳轉鏈接
		open-type	String	navigate	跳轉方式
		delta	Number		當 open-type 為 'navigateBack' 時有效，表示回退的層數
		hover-class	String	navigator-hover	指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果
		hover-stop-propagation	Boolean	false	指定是否阻止本節點的祖先節點出現點擊態	1.5.0
		hover-start-time	Number	50	按住后多久出現點擊態，單位毫秒
		hover-stay-time	Number	600	手指松開后點擊態保留時間，單位毫秒

其中open-type 的有效值如下：

值	說明	最低版本
navigate	對應 wx.navigateTo 的功能
redirect	對應 wx.redirectTo 的功能
switchTab	對應 wx.switchTab 的功能
reLaunch	對應 wx.reLaunch 的功能	1.1.0
navigateBack	對應 wx.navigateBack 的功能	1.1.0

多媒體(Media)：

組件名	注釋	組件屬性
組件名	注釋	屬性名	類型	默認值	說明	最低版本
audio	音頻	id	String		audio 組件的唯一標識符
		src	String		要播放音頻的資源地址
		loop	Boolean	false	是否循環播放
		controls	Boolean	false	是否顯示默認控件
		poster	String		默認控件上的音頻封面的圖片資源地址，如果 controls 屬性值為 false 則設置 poster 無效
		name	String	未知音頻	默認控件上的音頻名字，如果 controls 屬性值為 false 則設置 name 無效
		author	String	未知作者	默認控件上的作者名字，如果 controls 屬性值為 false 則設置 author 無效
		binderror	EventHandle		當發生錯誤時觸發 error 事件，detail = {errMsg: MediaError.code}
		bindplay	EventHandle		當開始/繼續播放時觸發play事件
		bindpause	EventHandle		當暫停播放時觸發 pause 事件
		bindtimeupdate	EventHandle		當播放進度改變時觸發 timeupdate 事件，detail = {currentTime, duration}
		bindended	EventHandle		當播放到末尾時觸發 ended 事件
image	圖片	src	String		圖片資源地址
		mode	String	'scaleToFill'	圖片裁剪、縮放的模式
		lazy-load	Boolean	false	圖片懶加載。只針對page與scroll-view下的image有效	1.5.0
		binderror	HandleEvent		當錯誤發生時，發布到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'}
		bindload	HandleEvent		當圖片載入完畢時，發布到 AppService 的事件名，事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'}
video	視頻	src	String		要播放視頻的資源地址
		initial-time	Number		指定視頻初始播放位置	1.6.0
		duration	Number		指定視頻時長	1.1.0
		controls	Boolean	true	是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）
		danmu-list	Object Array		彈幕列表
		danmu-btn	Boolean	false	是否顯示彈幕按鈕，只在初始化時有效，不能動態變更
		enable-danmu	Boolean	false	是否展示彈幕，只在初始化時有效，不能動態變更
		autoplay	Boolean	false	是否自動播放
		loop	Boolean	false	是否循環播放	1.4.0
		muted	Boolean	false	是否靜音播放	1.4.0
		page-gesture	Boolean	false	在非全屏模式下，是否開啟亮度與音量調節手勢	1.6.0
		direction	Number		設置全屏時視頻的方向，不指定則根據寬高比自動判斷。有效值為 0（正常豎向）, 90（屏幕逆時針90度）, -90（屏幕順時針90度）	1.7.0
		bindplay	EventHandle		當開始/繼續播放時觸發play事件
		bindpause	EventHandle		當暫停播放時觸發 pause 事件
		bindended	EventHandle		當播放到末尾時觸發 ended 事件
		bindtimeupdate	EventHandle		播放進度變化時觸發，event.detail = {currentTime, duration} 。觸發頻率 250ms 一次
		bindfullscreenchange	EventHandle		當視頻進入和退出全屏是觸發，event.detail = {fullScreen, direction}，direction取為 vertical 或 horizontal	1.4.0
		objectFit	String	contain	當視頻大小與 video 容器大小不一致時，視頻的表現形式。contain：包含，fill：填充，cover：覆蓋
		poster	String		視頻封面的圖片網絡資源地址，如果 controls 屬性值為 false 則設置 poster 無效

地圖(Map)：

組件名	注釋	組件屬性
組件名	注釋	屬性名	類型	默認值	說明	最低版本
map	地圖	longitude	Number		中心經度
		latitude	Number		中心緯度
		scale	Number	16	縮放級別，取值范圍為5-18
		markers	Array		標記點
		covers	Array		即將移除，請使用 markers
		polyline	Array		路線
		circles	Array		圓
		controls	Array		控件
		include-points	Array		縮放視野以包含所有給定的坐標點
		show-location	Boolean		顯示帶有方向的當前定位點
		bindmarkertap	EventHandle		點擊標記點時觸發
		bindcallouttap	EventHandle		點擊標記點對應的氣泡時觸發	1.2.0
		bindcontroltap	EventHandle		點擊控件時觸發
		bindregionchange	EventHandle		視野發生變化時觸發
		bindtap	EventHandle		點擊地圖時觸發
		bindupdated	EventHandle		在地圖渲染更新完成時觸發	1.6.0

畫布(Canvas)：

組件名	注釋	組件屬性
組件名	注釋	屬性名	類型	默認值	說明	最低版本
canvas	畫布	src	String		要播放視頻的資源地址
		initial-time	Number		指定視頻初始播放位置	1.6.0
		duration	Number		指定視頻時長	1.1.0
		controls	Boolean	true	是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）
		danmu-list	Object Array		彈幕列表
		danmu-btn	Boolean	false	是否顯示彈幕按鈕，只在初始化時有效，不能動態變更
		enable-danmu	Boolean	false	是否展示彈幕，只在初始化時有效，不能動態變更
		autoplay	Boolean	false	是否自動播放
		loop	Boolean	false	是否循環播放	1.4.0
		muted	Boolean	false	是否靜音播放	1.4.0
		page-gesture	Boolean	false	在非全屏模式下，是否開啟亮度與音量調節手勢	1.6.0
		direction	Number		設置全屏時視頻的方向，不指定則根據寬高比自動判斷。有效值為 0（正常豎向）, 90（屏幕逆時針90度）, -90（屏幕順時針90度）	1.7.0
		show-progress	Boolean	true	若不設置，寬度大于240時才會顯示	1.9.0
		show-fullscreen-btn	Boolean	true	是否顯示全屏按鈕	1.9.0
		show-play-btn	Boolean	true	是否顯示視頻底部控制欄的播放按鈕	1.9.0
		show-center-play-btn	Boolean	true	是否顯示視頻中間的播放按鈕	1.9.0
		enable-progress-gesture	Boolean	true	是否開啟控制進度的手勢	1.9.0
		bindplay	EventHandle		當開始/繼續播放時觸發play事件
		bindpause	EventHandle		當暫停播放時觸發 pause 事件
		bindended	EventHandle		當播放到末尾時觸發 ended 事件
		bindtimeupdate	EventHandle		播放進度變化時觸發，event.detail = {currentTime, duration} 。觸發頻率 250ms 一次
		bindfullscreenchange	EventHandle		當視頻進入和退出全屏是觸發，event.detail = {fullScreen, direction}，direction取為 vertical 或 horizontal	1.4.0
		objectFit	String	contain	當視頻大小與 video 容器大小不一致時，視頻的表現形式。contain：包含，fill：填充，cover：覆蓋
		poster	String		視頻封面的圖片網絡資源地址，如果 controls 屬性值為 false 則設置 poster 無效

您最近使用了：

微信小程序組件說明表

基礎組件

什么是組件：

屬性類型

基本組件列表

視圖容器(View Container)：

基礎內容(Basic Content)：

表單(Form)：

導航(Navigation)：

多媒體(Media)：

地圖(Map)：

畫布(Canvas)：

BeJSON網站導航

JSON工具

編碼/加密

格式化

網絡

前端

后端

轉換

其他

文檔

圖片處理

文字處理

數學

站長工具

顏色

平臺工具

更多

房貸計算器

車貸計算器

利率計算器

反算計算器

BeJSON交流QQ群

雙十一大促