微信小程序之旅二（組件構建ui界面之基礎組件上）

組件介紹

一、視圖容器組件（view）

視圖容器組件是wxml界面佈局的基礎組件，它和html的div功能相似，用於界面佈局。

view 容器組件相關屬性：

屬性	類型	默認值	說明
hover	Boolean	false	是否啓用單擊態
hover-class	String	none	按下後顯示的樣式
hover-start-time	Number	50	按住後多久出現單擊態 毫秒
hover-stay-time	Number	400	手鬆開後單擊態保留的時間 毫秒

案例代碼：

<view class='item' hover="true" hover-class='test' hover-start-time='60' hover-stay-time='4000'>
  <input type='text' name="loginName" placeholder='請設置4-20位用戶名' placeholder-class='holder' bindblur='accountblur'></input>
</view>


.test{
  background-color: red;
}

 二、可滾動的視圖區域（scroll-view）

可滾動的視圖區域容許視圖區域內容橫向滾動或縱向滾動，相似於瀏覽器的滾動條。

scroll-viwe 容器相關屬性

屬性	類型	默認值	說明
scroll-x	Boolean	false	容許橫向滾動
scroll-y	Boolean	false	容許縱向滾動
upper-threshold	Number	50	距離頂部/左邊多少像素時，觸發scrolltoupper函數
lower-threshold	Number	50	距離底部/右邊多少像素時，觸發scrolltolower函數
scroll-top	Number		設置豎向滾動條的位置
scroll-left	Number		設置橫向滾動條的位置
scroll-into-view	String		值爲某子元素id，則滾動到該元素，元素頂部對齊到滾動區域頂部
bindscrolltoupper	EventHandle		滾動到頂部/左邊事件
bindscrolltolower	EventHandle		滾動到底部/右邊事件
bindscroll	EventHandle		滾動時觸發該事件

三、滑塊視圖容器（swiper）

滑塊視圖容器用來在指定區域內切換內容的顯示，經常使用語海報輪播和頁面內容切換效果

swiper相關屬性：

屬性	類型	默認值	說明
indicator-dots	Boolean	false	是否顯示面板指示點
autoplay	Boolean	false	是否自動切換
current	Number	0	當前所在頁面的index
interval	Number	5000	自動切換時間間隔
duration	Number	500	滑動動畫時長
circular	Boolean	false	是否採用銜接滑動
bindchange	EventHandel		curren改變時觸發change事件

示例代碼：

<view class='img'>
    <swiper indicator-dots='{{indicatorDots}}' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{banners}}" wx:for-index="index" wx:key="{{index}}">
        <swiper-item>
          <image src='{{item}}' style='width:100%; height:230px;'></image>
        </swiper-item>
      </block>
    </swiper>
  </view>

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    banners: [
      '../../images/banner.jpg',
      '../../images/banner1.jpg',
      '../../images/banner2.jpg',
      '../../images/banner3.jpg'
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
})

四、圖標組件（icon）

微信小程序提供了豐富的圖標組件，應用於不一樣的場景。

icon屬性

屬性	類型	默認值	說明
type	String		icon類型有：succes、succes_no_circle、info、warn、waitiong、cancel、download、search、clear
size	Number	23	icon的大小 單位像素
color	Color		icon的顏色

五、文本組件（text）

文本組價支持轉義字符「\」

六、進度條組件（progress）

進度條組件是一種提升用戶體驗度的組件

progress屬性

屬性	類型	默認值	說明
percent	Float		百分比0~100
show-info	Boolean	false	在進度條右側顯示百分比
stroke-width	Number	6	進度條線的寬度，單位px
color	Color	#09BB07	進度條的顏色
active	Boolean	false	進度條從左往右的動畫

七、表單組件（form）

button 按鈕組件

屬性	類型	默認值	說明
size	String	default	按鈕大小：default，mini
type	String	default	按鈕樣式類型，有效值 primary，default，warn
plain	Boolean	false	按鈕是否鏤空，背景色透明
disabled	Boolean	false	是否禁用
form-type	String		按鈕類型：submit，reset
hover-class	String	button-hver	指定按鈕按下去的樣式類
loading	Boolean	false	名稱是否帶loading效果
hover-start-time	Number	50	安裝以後多少毫秒後出現單擊態
hover-stay-time	Number	400	手指鬆開後單擊態保留多少毫秒

checkbox 多項選擇器、radio 單項選擇器

屬性	類型	默認值	說明
value	String		選中的value值
disabled	Boolean	false	是否禁用
checked	Boolean	false	是否選中當前項
color	Color		多選框的顏色

input 單行輸入框

屬性	類型	默認值	說明
value	String		輸入框的初始內容
type	String	text	input類型：text，number，idcard，digit
password	Boolean	false	是不是密碼類型
placeholder	String		輸入框佔位符
placeholder-style	String		指定的佔位符樣式
placeholder-class	String	input-palceholder	指定的佔位符樣式類
disabled	Boolean	false	是否禁用
maxlength	Number	140	最大輸入長度，設置爲-1時不限制長度
cursor-spacing	Number	0	指定光標與鍵盤的距離，單位px
auto-focus	Boolean	false	自動聚焦，拉起鍵盤（即將廢棄，直接使用focus）
foucs	Boolean	false	獲取焦點
bindinput	EventHandle		input事件
bindfocus	EventHandle		focus事件
bindblur	EventHandle		blur事件
bindconfirm	EventHandle		單擊「完成」按鈕時觸發

textarea 多行輸入框

屬性	類型	默認值	說明
value	String		輸入的內容
placeholder	String		輸入框爲空時的佔位符
placeholder-style	String		佔位符樣式
placeholder-class	String	input-placeholder	佔位符樣式類
disabled	Boolean	false	是否禁用
maxlength	Number	140	輸入最大長度，設置爲-1時不限制長度
cursor-spacing	Number	0	指定光標與鍵盤的距離
focus	Boolean	false	獲取焦點
auto-height	Boolean	false	是否自動增高，設置auto-height時，style.height不生效
fixed	Boolean	false	若是textarea在一個position:fixed的區域中時，須要指定該參數爲true
bindinechange	EventHandle		行數變化時調用該函數
bindinput	EventHandle		input事件
bindfocus	EventHandle		focus事件
bindblue	EventHandle		blur事件
bindconfirm	EventHandle		單擊「完成」按鈕時觸發該事件

 lable組件：只包含了一個for屬性具體就不過多介紹該組件了。

上半部分組件就介紹到這裏，以上組件內容作一個大概瞭解便可，作到在實踐的過程當中成長，多動手。接下來還會着重介紹一下滾動選擇器（picker），滑動選擇器（slider），開關選擇器（switch），form表單的相關屬性和一些地圖、畫布等組件的使用，爲了美好的將來多投資本身才是最正確的選擇的，告別懶惰！！！