本系列主要對(duì)小程序常用的組件做一個(gè)總結(jié)，方便自己及其它小程序開發(fā)者作為字典查閱和檢索。
共同屬性
小程序組件有一些公共屬性，在每個(gè)組件中代表的意義和數(shù)據(jù)類型都是一樣的。
-
id: 標(biāo)識(shí)組件的唯一性驮宴。 -
class: 組件的樣式類，在*.wxss中定義該樣式 -
style: 組件的內(nèi)聯(lián)樣式呕缭，動(dòng)態(tài)設(shè)置的內(nèi)聯(lián)樣式 -
hidden: 組件是否顯示堵泽，默認(rèn)為false, 即默認(rèn)顯示 -
data-*: 自定義屬性，組件上觸發(fā)事件時(shí)恢总，會(huì)發(fā)送給事件處理函數(shù),可以通過(guò)dataset獲取 -
bind*/catch*:將組件的事件和邏輯層的處理函數(shù)進(jìn)行綁定迎罗，其中bind：冒泡事件(繼續(xù)向上層分發(fā))，catch:非冒泡事件(停止向上分發(fā)事件）
容器組件
容器組件：內(nèi)部能嵌套任何標(biāo)簽片仿。常用的視圖容器有：view, scroll-view, swiper
1. view組件
<view/> 是一個(gè)塊級(jí)容器組件纹安，任何一種復(fù)雜的布局都可以嵌套在<view/> 組件內(nèi)，并在*.wxss中設(shè)置相關(guān)樣式砂豌。
<view/> 除了上述組件共有的屬性外厢岂，還包含一組關(guān)于點(diǎn)擊行為的屬性。
-
hover: 是否啟動(dòng)點(diǎn)擊態(tài)阳距，默認(rèn)為false -
hover-class: 指定按下去的樣式塔粒，默認(rèn)為none，即hover-class = "none",沒(méi)有點(diǎn)擊態(tài)效果 -
hover-start-time: 按住后延遲多少毫秒出現(xiàn)點(diǎn)擊態(tài)筐摘，單位：ms, 默認(rèn)為50ms -
hover-stay-time: 手指松開后卒茬，點(diǎn)擊態(tài)保持事件，單位：ms, 默認(rèn)為400ms
2. scroll-view 組件
在布局中咖熟，需要容器具有可滑動(dòng)的功能圃酵，且能監(jiān)聽(tīng)滾動(dòng)、觸頂球恤、觸底等事件辜昵，就需要<scroll-view/> 組件荸镊，<scroll-view/> 在<view/> 組件上添加滾動(dòng)相關(guān)的屬性咽斧，通過(guò)這些屬性堪置，可以響應(yīng)滾動(dòng)相關(guān)事件。
-
scroll-x: 允許橫向滾動(dòng)张惹，默認(rèn)為false -
scroll-y: 允許縱向滾動(dòng)舀锨，默認(rèn)為false -
upper-threshold: 觸發(fā)scrolltoupper事件時(shí)， 距頂部／左邊多少距離（單位為:px) -
lower-threshold: 觸發(fā)scrolltolower事件時(shí)宛逗，距底部／右邊多少距離（單位為:px)
-scroll-top: 設(shè)置豎向滾動(dòng)條位置
-scroll-left: 設(shè)置橫向滾動(dòng)條位置
-scroll-into-view: 值為某子元素的id, 該子元素滾動(dòng)到頂部對(duì)齊滾動(dòng)區(qū)域頂部
-bindscrolltoupper: 滾動(dòng)到頂部／左邊坎匿，會(huì)觸發(fā)scrolltoupper事件
-bindscrolltolower:滾動(dòng)到底部／右邊，會(huì)觸發(fā)scrolltolower事件
-bindscroll: 滾動(dòng)時(shí)觸發(fā)雷激，其中函數(shù)參數(shù)event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
注意:
<textarea/>,<video/>,<map/>,<canvas/> 不能嵌套在<scroll-view/>中使用
3. swiper組件－滑塊視圖組件
利用swiper 組件替蔬，可以實(shí)現(xiàn)輪播圖，滑動(dòng)頁(yè)面屎暇，預(yù)覽圖片等承桥，一個(gè)完整的滑塊視圖軟件由<swiper/> 和 <swiper-item/> 兩個(gè)標(biāo)簽組成，不能單獨(dú)使用根悼。一個(gè)<swiper/> 只能嵌套一個(gè)或多個(gè)<swiper-item/>標(biāo)簽凶异，放置其它的標(biāo)簽會(huì)被刪除，其中挤巡，<swiper-item/> 中能放置任何標(biāo)簽剩彬，高度默認(rèn)為100%,另外沒(méi)有任何其它特殊屬性。
<swiper/> 的屬性如下：
-
indicator-dots: 是否顯示面板指示點(diǎn)矿卑，默認(rèn)：false -
autoplay: 是否自動(dòng)播放喉恋，默認(rèn):false -
current: 當(dāng)前所在頁(yè)面的index, 默認(rèn)：0 -
interval: 自動(dòng)切換時(shí)間間隔，默認(rèn)：5000ms -
duration: 滑動(dòng)動(dòng)畫時(shí)間間隔母廷，默認(rèn)：1000ms -
circular: 是否采用銜接動(dòng)畫播放瀑晒，默認(rèn)：false -
bindchange:current改變時(shí)觸發(fā)change事件，回調(diào)函數(shù)參數(shù)event.detail = {current}
