以下所有內容都來自uni-app官方文檔: https://uniapp.dcloud.io/component/
- 視圖容器
- view
view組件類似於html中的div,其主要作用就是當做一個容器來使用
屬性說明
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| hover-class | String | none | 指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果 |
| hover-stop-propagation | Boolean | false | 指定是否阻止本節點的祖先節點出現點擊態，App、H5、支付寶小程序、百度小程序不支持（支付寶小程序、百度小程序文檔中都有此屬性，實測未支持） |
| hover-start-time | Number | 50 | 按住后多久出現點擊態，單位毫秒 |
| hover-stay-time | Number | 400 | 手指松開后點擊態保留時間，單位毫秒 |
- scroll-view
可滾動區域,在webview中性能不如頁面滾動
使用豎向滾動時，需要給 <scroll-view> 一個固定高度，通過 css 設置 height；使用橫向滾動時，需要給<scroll-view>添加white-space: nowrap;樣式。
屬性說明
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| scroll-x | Boolean | false | 允許橫向滾動 | |
| scroll-y | Boolean | false | 允許縱向滾動 | |
| upper-threshold | Number | 50 | 距頂部/左邊多遠時（單位px），觸發 scrolltoupper 事件 | |
| lower-threshold | Number | 50 | 距底部/右邊多遠時（單位px），觸發 scrolltolower 事件 | |
| scroll-top | Number | 設置豎向滾動條位置 | ||
| scroll-left | Number | 設置橫向滾動條位置 | ||
| scroll-into-view | String | 值應為某子元素id（id不能以數字開頭）。設置哪個方向可滾動，則在哪個方向滾動到該元素 | ||
| scroll-with-animation | Boolean | false | 在設置滾動條位置時使用動畫過渡 | |
| enable-back-to-top | Boolean | false | iOS點擊頂部狀態欄、安卓雙擊標題欄時，滾動條返回頂部，只支持豎向 | app-nvue，微信小程序 |
| show-scrollbar | Boolean | false | 控制是否出現滾動條 | App-nvue 2.1.5+ |
| refresher-enabled | Boolean | false | 開啟自定義下拉刷新 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ |
| refresher-threshold | number | 45 | 設置自定義下拉刷新閾值 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ |
| refresher-default-style | string | "black" | 設置自定義下拉刷新默認樣式，支持設置 black，white，none，none 表示不使用默認樣式 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ |
| refresher-background | string | "#FFF" | 設置自定義下拉刷新區域背景顏色 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ |
| refresher-triggered | boolean | false | 設置當前下拉刷新狀態，true 表示下拉刷新已經被觸發，false 表示下拉刷新未被觸發 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ |
| enable-flex | boolean | false | 啟用 flexbox 布局。開啟后，當前節點聲明了 display: flex 就會成為 flex container，並作用於其孩子節點。 | 微信小程序 2.7.3 |
| scroll-anchoring | boolean | false | 開啟 scroll anchoring 特性，即控制滾動位置不隨內容變化而抖動，僅在 iOS 下生效，安卓下可參考 CSS overflow-anchor 屬性。 | 微信小程序 2.8.2 |
| @scrolltoupper | EventHandle | 滾動到頂部/左邊，會觸發 scrolltoupper 事件 | ||
| @scrolltolower | EventHandle | 滾動到底部/右邊，會觸發 scrolltolower 事件 | ||
| @scroll | EventHandle | 滾動時觸發，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} | ||
| @refresherpulling | EventHandle | 自定義下拉刷新控件被下拉 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ | |
| @refresherrefresh | EventHandle | 自定義下拉刷新被觸發 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ | |
| @refresherrestore | EventHandle | 自定義下拉刷新被復位 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ | |
| @refresherabort | EventHandle | 自定義下拉刷新被中止 | app-vue 2.5.12+,微信小程序基礎庫2.10.1+ |
- swiper
滑塊視圖容器,一般用於左右或上下滑動
屬性說明
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示點 | |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示點顏色 | |
| indicator-active-color | Color | #000000 | 當前選中的指示點顏色 | |
| active-class | String | swiper-item 可見時的 class | 支付寶小程序 | |
| changing-class | String | acceleration 設置為 {{true}} 時且處於滑動過程中，中間若干屏處於可見時的class | 支付寶小程序 | |
| autoplay | Boolean | false | 是否自動切換 | |
| current | Number | 0 | 當前所在滑塊的 index | |
| current-item-id | String | 當前所在滑塊的 item-id ，不能與 current 被同時指定 | 支付寶小程序不支持 | |
| interval | Number | 5000 | 自動切換時間間隔 | |
| duration | Number | 500 | 滑動動畫時長 | app-nvue不支持 |
| circular | Boolean | false | 是否采用銜接滑動，即播放到末尾后重新回到開頭 | |
| vertical | Boolean | false | 滑動方向是否為縱向 | |
| previous-margin | String | 0px | 前邊距，可用於露出前一項的一小部分，接受 px 和 rpx 值 | app-nvue、字節跳動小程序不支持 |
| next-margin | String | 0px | 后邊距，可用於露出后一項的一小部分，接受 px 和 rpx 值 | app-nvue、字節跳動小程序不支持 |
| acceleration | Boolean | false | 當開啟時，會根據滑動速度，連續滑動多屏 | 支付寶小程序 |
| disable-programmatic-animation | Boolean | false | 是否禁用代碼變動觸發 swiper 切換時使用動畫。 | 支付寶小程序 |
| display-multiple-items | Number | 1 | 同時顯示的滑塊數量 | app-nvue、支付寶小程序不支持 |
| skip-hidden-item-layout | Boolean | false | 是否跳過未顯示的滑塊布局，設為 true 可優化復雜情況下的滑動性能，但會丟失隱藏狀態滑塊的布局信息 | App、微信小程序 |
| disable-touch | Boolean | false | 是否禁止用戶 touch 操作 | App 2.5.5+、H5 2.5.5+、支付寶小程序、字節跳動小程序（只在初始化時有效，不能動態變更） |
| touchable | Boolean | true | 是否監聽用戶的觸摸事件，只在初始化時有效，不能動態變更 | 字節跳動小程序（uni-app 2.5.5+ 推薦統一使用 disable-touch） |
| easing-function | String | default | 指定 swiper 切換緩動動畫類型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic | 微信小程序、快手小程序 |
| @change | EventHandle | current 改變時會觸發 change 事件，event.detail = {current: current, source: source} | ||
| @transition | EventHandle | swiper-item 的位置發生改變時會觸發 transition 事件，event.detail = {dx: dx, dy: dy}，支付寶小程序暫不支持dx, dy | App、H5、微信小程序、支付寶小程序、字節跳動小程序、QQ小程序、快手小程序 | |
| @animationfinish | EventHandle | 動畫結束時會觸發 animationfinish 事件，event.detail = {current: current, source: source} | 字節跳動小程序不支持 |
change事件返回的detail表示觸發原因,其中有三個取值:autoplay(自動播放),touch(用戶觸發),空字符串(其他原因)
swiper做左右拖動的長列表時,可以參考這個范例，插件市場新聞模板示例，
swiper-item組件:僅可放在swiper中,寬高自動設置為100%,屬性:item-id 該組件的標識
- match-media
media query 匹配檢測節點。
類似於網頁開發中使用媒體查詢來適配大屏小屏，match-media是一個可適配不同屏幕的基本視圖組件。可以指定一組 media query 媒體查詢規則，滿足查詢條件時，這個組件才會被展示。
例如在match-media組件中放置一個側邊欄，媒體查詢規則設置為寬屏才顯示，就可以實現在PC寬屏顯示該側邊欄，而在手機窄屏中不顯示側邊欄的效果。
| 屬性名 | 類型 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| min-width | number | 否 | 頁面最小寬度（ px 為單位） | |
| max-width | number | 否 | 頁面最大寬度（ px 為單位） | |
| width | number | 否 | 頁面寬度（ px 為單位） | |
| min-height | number | 否 | 頁面最小高度（ px 為單位） | |
| max-height | number | 否 | 頁面最大高度（ px 為單位） | |
| height | number | 否 | 頁面高度（ px 為單位） | |
| orientation | string | 否 | 屏幕方向（ landscape 或 portrait ） |
- movable-area
可拖動區域
movable-area指代可拖動的范圍，在其中內嵌movable-view組件用於指示可拖動的區域。
即手指/鼠標按住movable-view拖動或雙指縮放，但拖不出movable-area規定的范圍。
當然也可以不拖動，而使用代碼來觸發movable-view在movable-area里的移動縮放。
注意：movable-area 必須設置 width 和 height 屬性，不設置默認為 10px
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| scale-area | Boolean | false | 當里面的 movable-view 設置為支持雙指縮放時，設置此值可將縮放手勢生效區域修改為整個 movable-area |
- movable-view
可移動的視圖容器，在頁面中可以拖拽滑動或雙指縮放。
movable-view必須在movable-area組件中，並且必須是直接子節點，否則不能移動。
屬性說明
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| direction | String | none | movable-view的移動方向，屬性值有all、vertical、horizontal、none | |
| inertia | Boolean | false | movable-view是否帶有慣性 | 微信小程序、支付寶小程序、App、H5、百度小程序 |
| out-of-bounds | Boolean | false | 超過可移動區域后，movable-view是否還可以移動 | 微信小程序、支付寶小程序、App、H5、百度小程序、快手小程序 |
| x | Number / String | 定義x軸方向的偏移，如果x的值不在可移動范圍內，會自動移動到可移動范圍；改變x的值會觸發動畫 | ||
| y | Number / String | 定義y軸方向的偏移，如果y的值不在可移動范圍內，會自動移動到可移動范圍；改變y的值會觸發動畫 | ||
| damping | Number | 20 | 阻尼系數，用於控制x或y改變時的動畫和過界回彈的動畫，值越大移動越快 | 微信小程序、支付寶小程序、App、H5、百度小程序 |
| friction | Number | 2 | 摩擦系數，用於控制慣性滑動的動畫，值越大摩擦力越大，滑動越快停止；必須大於0，否則會被設置成默認值 | 微信小程序、支付寶小程序、App、H5、百度小程序 |
| disabled | Boolean | false | 是否禁用 | |
| scale | Boolean | false | 是否支持雙指縮放，默認縮放手勢生效區域是在movable-view內 | 微信小程序、支付寶小程序、App、H5、快手小程序 |
| scale-min | Number | 0.5 | 定義縮放倍數最小值 | 微信小程序、支付寶小程序、App、H5、快手小程序 |
| scale-max | Number | 10 | 定義縮放倍數最大值 | 微信小程序、支付寶小程序、App、H5、快手小程序 |
| scale-value | Number | 1 | 定義縮放倍數，取值范圍為 0.5 - 10 | 微信小程序、支付寶小程序、App、H5、快手小程序 |
| animation | Boolean | true | 是否使用動畫 | 微信小程序、支付寶小程序、App、H5、百度小程序、快手小程序 |
| @change | EventHandle | 拖動過程中觸發的事件，event.detail = {x: x, y: y, source: source}，其中source表示產生移動的原因，值可為touch（拖動）、touch-out-of-bounds（超出移動范圍）、out-of-bounds（超出移動范圍后的回彈）、friction（慣性）和空字符串（setData） | ||
| @scale | EventHandle | 縮放過程中觸發的事件，event.detail = {x: x, y: y, scale: scale}， | 微信小程序、App、H5、百度小程序、快手小程序 |
除了基本事件外，movable-view提供了兩個特殊事件
| 類型 | 觸發條件 |
|---|---|
| htouchmove | 初次手指觸摸后移動為橫向的移動，如果catch此事件，則意味着touchmove事件也被catch |
| vtouchmove | 初次手指觸摸后移動為縱向的移動，如果catch此事件，則意味着touchmove事件也被catch |
- cover-view
覆蓋在原生組件上的文本視圖。
app-vue和小程序框架，渲染引擎是webview的。但為了優化體驗，部分組件如map、video、textarea、canvas通過原生控件實現，原生組件層級高於前端組件（類似flash層級高於div）。為了能正常覆蓋原生組件，設計了cover-view.
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| scroll-top | number/string | 設置頂部滾動偏移量，僅在設置了 overflow-y: scroll 成為滾動元素后生效 | 微信小程序2.1.0 |
- cover-image
覆蓋在原生組件上的圖片視圖。可覆蓋的原生組件同cover-view，支持嵌套在cover-view里。
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| src | String | 圖標路徑。支持本地路徑、網絡路徑。不支持 base64 格式。 | ||
| @load | eventhandle | 圖片加載成功時觸發 | 微信小程序 2.1.0 | |
| @error | eventhandle | 圖片加載失敗時觸發 | 微信小程序 2.1.0 |
- 基礎內容
- icon
圖標,由於 icon 組件各端表現存在差異，可以通過使用 字體圖標 的方式來彌補各端差異。
屬性說明
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| type | String | icon的類型 | |
| size | Number | 23 | icon的大小，單位px |
| color | Color | icon的顏色，同css的color |
- text
文本組件,用於包裹文本內容
屬性說明
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| selectable | Boolean | false | 文本是否可選 | App、H5、快手小程序 |
| user-select | Boolean | false | 文本是否可選 | 微信小程序 |
| space | String | 顯示連續空格 | App、H5、微信小程序 | |
| decode | Boolean | false | 是否解碼 | App、H5、微信小程序 |
space值有3個: ensp(中文字符空格一半大),emsp(中文字符空格大小),nbsp(根據字體設置的空格大小)
- rich-text
富文本
| 屬性名 | 類型 | 默認值 | 說明 | 平台兼容 |
|---|---|---|---|---|
| nodes | Array / String | [] | 節點列表 / HTML String | |
| space | string | 顯示連續空格 | 微信基礎庫2.4.1+詳見、QQ小程序、快手小程序詳見 | |
| selectable | Boolean | false | 富文本是否可以長按選中，可用於復制，粘貼等場景 | 百度小程序（真機） |
- progress
進度條
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| percent | Float | 無 | 百分比0~100 | |
| show-info | Boolean | false | 在進度條右側顯示百分比 | |
| border-radius | number/string | 0 | 圓角大小 | app-nvue、微信基礎庫2.3.1+、QQ小程序、快手小程序 |
| font-size | number/string | 16 | 右側百分比字體大小 | app-nvue、微信基礎庫2.3.1+、QQ小程序 |
| stroke-width | Number | 6 | 進度條線的寬度，單位px | |
| activeColor | Color | #09BB07（百度為#E6E6E6） | 已選擇的進度條的顏色 | |
| backgroundColor | Color | #EBEBEB | 未選擇的進度條的顏色 | |
| active | Boolean | false | 進度條從左往右的動畫 | |
| active-mode | String | backwards | backwards: 動畫從頭播；forwards：動畫從上次結束點接着播 | App、H5、微信小程序、QQ小程序、快手小程序 |
| duration | number | 30 | 進度增加1%所需毫秒數 | App-nvue2.6.1+、微信基礎庫2.8.2+、H5 3.1.11+、快手小程序 |
| @activeend | EventHandle | 動畫完成事件 | 微信小程序 |
- 表單組件
- button 按鈕
- CheckBox 多選框
- editor 富文本編輯器
- form 表單
- input 輸入框
- label 表單分組
- picker 普通選擇器,底部彈出的滾動選擇彈窗
- picker-view 嵌入頁面的滾動選擇器
- radio 單項選擇器
- slider 滑動選擇器
- switch 開關選擇器
- textarea 多行輸入框
- 路由及跳轉
- navigater 頁面跳轉
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| url | String | 應用內的跳轉鏈接，值為相對路徑或絕對路徑，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后綴 |
||
| open-type | String | navigate | 跳轉方式 | |
| delta | Number | 當 open-type 為 'navigateBack' 時有效，表示回退的層數 | ||
| animation-type | String | pop-in/out | 當 open-type 為 navigate、navigateBack 時有效，窗口的顯示/關閉動畫效果，詳見：窗口動畫 | App |
| animation-duration | Number | 300 | 當 open-type 為 navigate、navigateBack 時有效，窗口顯示/關閉動畫的持續時間。 | App |
| hover-class | String | navigator-hover | 指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果 | |
| hover-stop-propagation | Boolean | false | 指定是否阻止本節點的祖先節點出現點擊態 | 微信小程序 |
| hover-start-time | Number | 50 | 按住后多久出現點擊態，單位毫秒 | |
| hover-stay-time | Number | 600 | 手指松開后點擊態保留時間，單位毫秒 | |
| target | String | self | 在哪個小程序目標上發生跳轉，默認當前小程序，值域self/miniProgram | 微信2.0.7+、百度2.5.2+、QQ |
- 媒體組件
- audio 音頻
- camera 區域相機
- image 圖片
- video 視頻播放組件
- live-player 直播拉流
- live-pusher 直播推流
- 地圖
- map 地圖組件
屬性名 類型 默認值 說明 平台差異說明 longitude Number 中心經度 latitude Number 中心緯度 scale Number 16 縮放級別，取值范圍為3-20 高德地圖縮放比例與微信小程序不同 min-scale Number 3 最小縮放級別 App-nvue 3.1.0+、微信小程序2.13+ max-scale Number 20 最大縮放級別 App-nvue 3.1.0+、微信小程序2.13+ layer-style Number 1 個性化地圖 App-nvue 3.1.0+、微信小程序2.13+ markers Array 標記點 polyline Array 路線 circles Array 圓 controls Array 控件 include-points Array 縮放視野以包含所有給定的坐標點 App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付寶小程序 enable-3D Boolean false 是否顯示3D樓塊 App-nvue 2.1.5+、微信小程序2.3.0 show-compass Boolean false 是否顯示指南針 App-nvue 2.1.5+、微信小程序2.3.0 enable-zoom Boolean true 是否支持縮放 App-nvue 2.1.5+、微信小程序2.3.0 enable-scroll Boolean true 是否支持拖動 App-nvue 2.1.5+、微信小程序2.3.0 enable-rotate Boolean false 是否支持旋轉 App-nvue 2.1.5+、微信小程序2.3.0 enable-overlooking Boolean false 是否開啟俯視 App-nvue 2.1.5+、微信小程序2.3.0 enable-satellite Boolean false 是否開啟衛星圖 App-nvue 2.1.5+、微信小程序2.7.0 enable-traffic Boolean false 是否開啟實時路況 App-nvue 2.1.5+、微信小程序2.7.0 enable-poi Boolean false 是否展示 POI 點 App-nvue 3.1.0+ enable-building Boolean false 是否展示建築物 App-nvue 3.1.0+ 支持 (廢除原enable-3D屬性 高德地圖默認開啟建築物就是3D無法設置) show-location Boolean 顯示帶有方向的當前定位點 微信小程序、H5、百度小程序、支付寶小程序 polygons Array. <polygon>多邊形 App-nvue 2.1.5+、微信小程序、百度小程序、支付寶小程序 enable-indoorMap Boolean false 是否展示室內地圖 App-nvue 3.1.0+ @markertap EventHandle 點擊標記點時觸發，e.detail = {markerId} App-nvue 2.3.3+, App平台需要指定 marker 對象屬性 id @labeltap EventHandle 點擊label時觸發，e.detail = {markerId} 微信小程序2.9.0 @callouttap EventHandle 點擊標記點對應的氣泡時觸發，e.detail = {markerId} @controltap EventHandle 點擊控件時觸發，e.detail = {controlId} @regionchange EventHandle 視野發生變化時觸發 微信小程序、H5、百度小程序、支付寶小程序 @tap EventHandle 點擊地圖時觸發; App-nuve、微信小程序2.9支持返回經緯度 @updated EventHandle 在地圖渲染更新完成時觸發 微信小程序、H5、百度小程序 @anchorpointtap EventHandle 點擊定位標時觸發，e.detail = {longitude, latitude} App-nvue 3.1.0+、微信小程序2.13+ @poitap EventHandle 點擊地圖poi點時觸發，e.detail = {name, longitude, latitude} 微信小程序2.3.0+
- map 地圖組件
- 畫布
- canvas 畫布
| 屬性名 | 類型 | 默認值 | 說明 | 平台差異說明 |
|---|---|---|---|---|
| type | String | 指定 canvas 類型，支持 2d (2.9.0) 和 webgl | 微信小程序 2.7.0+ 字節小程序1.78.0+ | |
| canvas-id | String | canvas 組件的唯一標識符 | ||
| disable-scroll | Boolean | false | 當在 canvas 中移動時且有綁定手勢事件時，禁止屏幕滾動以及下拉刷新 | 字節跳動小程序不支持 |
| @touchstart | EventHandle | 手指觸摸動作開始 | 字節小程序1.78.0+ | |
| @touchmove | EventHandle | 手指觸摸后移動 | 字節小程序1.78.0+ | |
| @touchend | EventHandle | 手指觸摸動作結束 | 字節小程序1.78.0+ | |
| @touchcancel | EventHandle | 手指觸摸動作被打斷，如來電提醒，彈窗 | 字節小程序1.78.0+ | |
| @longtap | EventHandle | 手指長按 500ms 之后觸發，觸發了長按事件后進行移動不會觸發屏幕的滾動 | 字節跳動小程序不支持 | |
| @error | EventHandle | 當發生錯誤時觸發 error 事件，detail = {errMsg: 'something wrong'} | 字節跳動小程序不支持 |
- webview
- webview web瀏覽器組件
| 屬性名 | 類型 | 說明 | 平台差異說明 |
|---|---|---|---|
| src | String | webview 指向網頁的鏈接 | |
| allow | String | 用於為 iframe 指定其特征策略 | H5 |
| sandbox | String | 該屬性對呈現在 iframe 框架中的內容啟用一些額外的限制條件。 | H5 |
| webview-styles | Object | webview 的樣式 | App-vue |
| @message | EventHandler | 網頁向應用 postMessage 時，會在特定時機（后退、組件銷毀、分享）觸發並收到消息。 |
H5 暫不支持（可以直接使用 window.postMessage） |
| @onPostMessage | EventHandler | 網頁向應用實時 postMessage |
App-nvue |
- 廣告
- ad 信息流廣告
- ad-draw 沉浸式視頻流廣告
- ad-content-page 短視頻內容聯盟組件
- grid廣告
- 頁面屬性節點
- page-meta
- navigation-bar
- custom-tab-bar