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

時間 2020-02-16

標籤微信程序開發原生組件简体版

原文原文鏈接

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

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

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

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

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

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

視圖容器

view 容器組件canvas
scroll-view 滾動組件小程序
swiper 輪播組件微信小程序
swiper-itemreact-native
- 僅可放置在swiper組件中，寬高自動設置爲100%。
movable-area 可移動區域微信
movable-view 支持移動和縮放的組件框架
cover-view 容器組件
- 與view不一樣是能夠覆蓋在原生組件之上，如canvas、video
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,否	自定義下拉刷新被停止