一:概述
? ??框架為開發者提供了一系列基礎組件,開發者可以通過組合這些基礎組件進行快速開發
? ??組件:
? ??????組件是視圖層的基本組成單元
? ??????組件自帶一些功能與微信風格的樣式
? ??????一個組件通常包括開始標簽和結束標簽,屬性用來修飾這個組件,內容在兩個標簽之內
? ??????注意:所有組件與屬性都是小寫,以連字符-連接(此名如何理解?)
? ? ? ? 這樣理解吧?有些組件或組件的屬性是以-連接成一個名稱的,
????????如組件名稱:scroll-view,picker-view,又如組件屬性名稱:data-*
二:組件屬性的類型
? ??類型? ? ? ? ? ? ? ? ? ? ? 描述? ? ? ? ? ? ? ? ? ? ? ? ? ? 注解
? ??Boolean? ? ? ? ? ? ? ?布爾值? ? ? ? ? ? ? ? ? ? ? ? 組件寫上該屬性,不管該屬性等于什么,其值都為true,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?只有組件上沒有寫該屬性時,屬性值才為false。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如果屬性值為變量,變量的值會被轉換為Boolean類型
????Number? ? ? ? ? ? ? ?數字? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1, 2.5
????String? ? ? ? ? ? ? ? ? ?字符串? ? ? ? ? ? ? ? ? ? ? ? ?"string"
????Array? ? ? ? ? ? ? ? ? ? ?數組? ? ? ? ? ? ? ? ? ? ? ? ? ? [ 1, "string" ]
????Object? ? ? ? ? ? ? ? ? ?對象? ? ? ? ? ? ? ? ? ? ? ? ? ? ?{ key: value }
????EventHandler? ? ?事件處理函數名? ? ? ? "handlerName" 是 Page中定義的事件處理函數名
????Any? ? ? ? ? ? ? ? ? ? ? ?任意屬性
三:組件屬性
? ? 1.組件都有的屬性:
? ??屬性名? ? ? ? ? ? ? ? ? ? ? ? 類型? ? ? ? ? ? ? ? ? ? ? ? ? 描述注解
? ??id? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?String? ? ? ? ? ? ? ? ? ? ? ?組件的唯一標示?保持整個頁面唯一
????class? ? ? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ? ? ? ?組件的樣式類??在對應的 WXSS 中定義的樣式類
????style? ? ? ? ? ? ? ? ? ? ? ? ? ? String? ? ? ? ? ? ? ? ? ? ? ? 組件的內聯樣式?可以動態設置的內聯樣式
????hidden? ? ? ? ? ? ? ? ? ? ? ? Boolean? ? ? ? ? ? ? ? ? ? ?組件是否顯示??所有組件默認顯示
????data-*? ? ? ? ? ? ? ? ? ? ? ? ?Any? ? ? ? ? ? ? ? ? ? ? ? ? ? 自定義屬性?組件上觸發的事件時,會發送給事件處理函數
????bind* / catch*? ? ? ? ? EventHandler? ? ? ? ? ?組件的事件?詳見事件
? ? 2.特殊屬性
????幾乎所有組件都有各自定義的屬性,可以對該組件的功能或樣式進行修飾,參考各個組件的定義
四:組件列表
????只列出所有版本兼容的組件,對一些高版本新增加而要做兼容性處理的組件請看后面單節
? ? 1.視圖容器(View Container):
????????view(視圖容器),scroll-view(可滾動視圖容器),swiper(滑塊視圖容器)
? ? 2.基礎內容(Basic Content):
? ??????icon(圖標),text(文字),progress(進度條)
? ? 3.表單(Form):
? ??????button(按鈕),form(表單),input(輸入框),checkbox(多項選擇器),
? ??????radio(單項選擇器),picker(列表選擇器),picker-view(內嵌列表選擇器),
? ??????slider(滾動選擇器),switch(開關選擇器),label(標簽)
? ? 4.導航(Navigation):
? ??????navigator(應用鏈接)
? ? 5.多媒體(Media):
? ??????audio(音頻),image(圖片),video(視頻)
? ? 6.地圖(Map):
? ??????map(地圖)
? ? 7.畫布(Canvas):
? ??????canvas(畫布)
?:
第九節:視圖層_組件簡述
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
- 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
推薦閱讀更多精彩內容
- 用到的組件 1、通過CocoaPods安裝 2、第三方類庫安裝 3、第三方服務 友盟社會化分享組件 友盟用戶反饋 ...