微信小程序開發- 3 - 原生組件(一)

此文主要介紹了view組件和scroll-view組件，由於這兩個組件相似於react-native的和view、scroll-view組件，是開發中確定會用到的，和HTML標籤相比，差別比較大，並且屬性比較多，就詳細介紹了一下；

其他組件沒有詳細介紹，由於其他大部分組件和vue、react的UI框架的UI組件使用相似，能夠在開發中遇到了再去細看；官網文檔介紹的比較詳細；

有部分組件不經常使用的並且很重要的組件會在接下來補上

微信小程序官方文檔地址 https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

小程序開發框架 - 組件類型

• 視圖容器
• 基礎內容
• 表單組件
• 導航組件
• 地圖組件
• 媒體組件
• 開放能力
• 畫布

視圖容器

1. view 容器組件

2. scroll-view 滾動組件

3. swiper 輪播組件

4. swiper-item

   • 僅可放置在swiper組件中，寬高自動設置爲100%。

5. movable-area 可移動區域

6. movable-view 支持移動和縮放的組件

7. cover-view 容器組件

   • 與view不一樣是能夠覆蓋在原生組件之上，如canvas、video

8. cover-image

   • 覆蓋在原生組件之上的圖片視圖。可覆蓋的原生組件同cover-view，支持嵌套在cover-view裏。

view組件

屬性名	默認值	說明
hover-class	node	指定按下去的樣式類；值爲none，沒有點擊態效果
hover-stop-propagation	false	指定是否阻止本節點的祖先節點出現點擊態
hover-start-time	50ms	按住多久後出現點擊態
hover-stay-time	400ms	手指頭鬆開後點擊態保留時間

scroll-view

屬性名	默認值	說明
scroll-x	false	容許橫向滾動
scroll-y	false	容許縱向滾動
upper-threshold	50	距離頂部/左邊多遠時，觸發scrollToupper事件
lower-threshold	50	距離底部/右邊多遠時，觸發scrollTolower事件
scroll-top		設置豎向滾動條位置
scroll-left		設置橫向滾動條位置
scrll-into-view		值爲某元素id(id不能以數字開頭),設置哪一個方向可滾動，則在哪一個方向上滾動到該元素；
scroll-width-animation	false	在設置滾動條位置時，是否使用動畫
enable-back-to-top	false	IOS點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向
enable-flex	false	啓用flex佈局，開啓後，當前節點聲明瞭display: flex,就會成爲flex-container,並做用於孩子節點
scroll-anchoring	false	開啓scroll-anchoring特性，即控制滾動位置不隨位置變化而抖動；盡在IOS下生效；安卓下可參考overflow-anchor屬性
refresher-enabled	false	是否開啓自定義下拉刷新
refresher-threshold	45	設置下拉刷新閾值
refresher-default-style	black	設置自定義下拉刷新默認樣式，支持設置black
refresher-background	#fff	設置自定義下拉刷新區域背景顏色
refresher-triggered	false	設置當前下拉刷新狀態；true表示下拉刷新已經被觸發；false表示未被觸發
bindscrolltoupper	eventhandle,false	滾動到頂部/左邊時觸發
bindscrolltolower	eventhandle,false	滾動到底部/右邊時觸發
bindscroll	eventhandle,false	滾動時觸發
bindrefresherpulling	eventhandle,否	自定義下拉刷新控件被下拉
bindrefresherfresh	eventhandle,否	自定義下拉刷新被觸發
bindrefresherstore	eventhandle,否	自定義下拉刷新被複位
bindrefresherabort	eventhandle,否	自定義下拉刷新被停止

movable-view

• 可移動的視圖容器，在頁面中能夠拖拽滑動。movable-view必須在 movable-area 組件中，而且必須是直接子節點，不然不能移動。

基礎內容組件

1. icon
2. text
3. rich-text
   • rich-text組件內部，不能再嵌套rich-text組件的
   • 事件流: touchstart,touchend,tap
4. progress

表單組件

• button
• checkbox
• form
• input
• label
  • 標籤
• picker
  • 選擇控件
  • 與picker-view區別是咱們主動觸發從底部彈出來的選擇控件
• picker-view
  • 嵌在頁面內的選擇控件
• radio
• switch
• text-area