4.1.9. 普通標題

標題內(nèi)置了多種常用背景顏色，支持快速切換標題單色背景顏色及漸

變背景顏色。是否顯示更多，更換標題圖標。

4.1.10. 底部按鈕

底部按鈕支持自定義圖標、圖標顯示徽標、圖標顏色、按鈕突出顯示

等屬性。

4.1.11. 進度條

進度條占比、高度、內(nèi)置顏色庫或自定義背景顏色、靜態(tài)條紋、動態(tài)

條 紋

4.1.12. 其他通用組件

視頻組件、音頻組件、時間軸、步驟條、網(wǎng)頁容器。

4.2.容器組件

容器組件支持通過高度和寬度來定義容器大小，接受其他組件的嵌入。

系統(tǒng)內(nèi)置了常用的幾款容器組件。

4.2.1. FLEX 組件

Flex 布局可以簡便、完整、響應(yīng)式地實現(xiàn)各種頁面布局，所以本軟件

研發(fā)出來 FLEX 組件。Flex 組件是本軟件布局的核心，只有掌握好 flex

組件布局，你才能打造出優(yōu)秀的個性化頁面。

? 排列方向 flex-direction

默認水平、水平逆序、垂直、垂直逆序

flex-direction: row | row-reverse | column | column-reverse;

? 對齊方式 justify-content

元素和容器的左端對齊、右端對齊、居中、元素之間保持相等的距離、

元素周圍保持相等的距離

justify-content: flex-start | flex-end | center | space-between |

space-around;

? 縱軸(交叉軸)對齊 align-items

元素與容器的頂部（起點）對齊、元素與容器的底部(終點)對齊、元

素縱向居中、元素在容器的基線位置顯示、元素被拉伸以填滿整個容

器

align-items: flex-start | flex-end | center | baseline | stretch;

? 換行方式 flex-wrap

默認不換行|自動換成多行|自動換成逆序多行

flex-wrap: nowrap | wrap | wrap-reverse;

FLEX 組件簡易用法

1. 拖動 FLEX 組件進設(shè)計器

2. 拖動文本內(nèi)容進 FLEX 組件

FLEX 組件默認拖出來為垂直布局。拖動兩個文件組件進 FLEX 組件容

器里，修改文本組件內(nèi)容分別為內(nèi)容 1、內(nèi)容 2。

3、修改排列方向為水平

修改屬性為水平后，發(fā)現(xiàn)內(nèi)容 1、內(nèi)容 2 并沒有水平顯示。如果要強

制水平需設(shè)置換行方式為不換行。

4、設(shè)置內(nèi)容文本背景、字體大小

設(shè)置內(nèi)容文本背景顏色、文本大小，方便我們來理解 FLEX 占比。

5、修改內(nèi)容柵格大小

選擇內(nèi)容 2 組件，改變柵格大小，旁邊內(nèi)容 1 的占比會跟著變化。

6、對齊方式設(shè)置

對齊方式為了更好理解效果，我們把文本內(nèi)容組件都柵格大小為 0。

都柵格為 0 后，兩個內(nèi)容并排擠一起，此時可以可以改對齊方式來查

看不同的效果。

比如下方的效果，就是大量使用了 FLEX 組件、圖片組件、文本組件

組合效果。

FLEX 組件是重個軟件核心，F(xiàn)LEX 布局是必須要掌握的一個關(guān)鍵組件。

后面將在案例里，通過案例來教大家使用 FLEX 組件做到不同的效果，

大家可以直接使用組件模板或頁面模板來學(xué)習(xí) FLEX 組件。

點擊模板后直接會加到設(shè)計區(qū)，可以輕松修改模板改為自己所有。

4.2.2. 自由面板組件

4.2.3. 組件輪播

組件輪播跟圖片輪播相似，只是為了更靈活輪播其他組件，將組件拖

到輪播組件里，每個輪播里可以分別設(shè)置不同的組件。

多宮格輪播組件

1. 拖動輪播組件進設(shè)計器

2. 拖動宮格組件進輪播容器

拖動宮格組件進輪播組件里，如果發(fā)現(xiàn)輪播組件高度不適合?？梢酝?/p>

過圖層面板快速定位回輪播組件，調(diào)整組件到一個適合的高度。

3. 下個輪播容器設(shè)計

點擊輪播容器指示點切換輪播，切換后，同樣可以拖動組件進容器。

4. 圖層里拖動組件進輪播容器

可以先把組件拖到任意設(shè)計器內(nèi)，然后通過圖層拖動至具體輪播。

4.2.4. 選項卡

選項卡組件，用于在不同的內(nèi)容區(qū)域之間進行切換。

標題內(nèi)置樣式、標題背景顏色、默認字體顏色、選中字體顏色、平分

標題寬度、選項卡標題背景、整體導(dǎo)航背景、選中標題放大、是否選

中邊框、是否內(nèi)容、導(dǎo)航滾動滾動等基礎(chǔ)特性。不同屬性組合在一起，

出現(xiàn)不同的效果。

關(guān)鍵屬性

選項卡標題支持上方、下方、左邊、右邊。

選項卡標題對齊方式支持左端對齊、右端對齊、居中對齊、元素之間

保持相等的距離、元素周圍保持相等的距離。

? 內(nèi)容區(qū)用法

選項卡組件跟組件輪播組件相似，每個選項容器里可以拖動組件進來

設(shè)計。

點擊標題會將入下個選項卡內(nèi)容設(shè)計

4.2.5. 折疊面板

將一組內(nèi)容放置在多個折疊面板中，點擊面板的標題可以展開或收縮

其內(nèi)容。

? 手風(fēng)琴效果

? 自定義標題背景顏色

4.2.6. 彈窗組件

易用、高度可定制化的彈窗組件，支持彈窗組件里自定義內(nèi)容。支持

不顯示標題、底部菜單。彈窗內(nèi)容里跟 FLEX 組件用法相似，可以往

彈窗內(nèi)容區(qū)拖進組件。

? 默認顯示

彈窗組件默認不顯示，如果默認要顯示，需要把默認顯示開關(guān)開啟。

? 窗口類型

支持普通窗口、底部窗口、左邊抽屜、右邊抽屜

? 彈窗效果

彈窗常用活動廣告圖、結(jié)果提示等。

? 抽屜效果

常用于菜單選擇。

? 底部窗口

常用分享、快速選擇等。

4.3.表單組件

4.3.1. 單行文本

用戶可以在文本框內(nèi)輸入或編輯文字。

輸入邊框、邊框圓角、底部邊框、標題顏色、背景顏色、標題輸入欄

換行等。

? 字段標識

字段標識是輸入字段重要的字段，相當(dāng)輸入框的 name，在 vue 里會

用 v-model=’name’，支持雙向綁定。

? 后綴類型

默認無后綴，支持標簽、圖標、圖片、驗證碼。后綴類型支持自定義

點擊事件。

? 驗證方式

輸入字段默認無驗證方式，支持非空、正則、長度范圍等。

驗證只有把組件拖到表單組件里才起效。

4.3.2. 多行文本

用戶可以在文本框內(nèi)輸入或編輯文字。

4.3.3. 單選框

在一組備選項中進行單選。

4.3.4. 復(fù)選框

在一組備選項中進行多選。

4.3.5. 下拉菜單

提供多個選項集合供用戶選擇，支持單列選擇和多列級聯(lián)，通常與彈

出層組件配合使用。

4.3.6. 多層選擇

提供多個選項集合供用戶選擇，支持單列選擇和多列級聯(lián)，通常與彈

出層組件配合使用。

4.3.7. 級聯(lián)選擇

級聯(lián)選擇框，用于多層級數(shù)據(jù)的選擇，典型場景為省市區(qū)選擇。

4.3.8. 開關(guān)

用于在打開和關(guān)閉狀態(tài)之間進行切換。

4.3.9. 日期時間

日歷組件用于選擇日期或日期區(qū)間。

4.3.10. 圖片上傳

用于將本地的圖片或文件上傳至服務(wù)器，并在上傳過程中展示預(yù)覽圖

和上傳進度。目前 Uploader 組件不包含將文件上傳至服務(wù)器的接口

邏輯，該步驟需要自行實現(xiàn)。

4.3.11. 評分控件

用于對事物進行評級操作。

4.3.12. 滑塊控件

滑動輸入條，用于在給定的范圍內(nèi)選擇一個值。

4.3.13. 步進器

步進器由增加按鈕、減少按鈕和輸入框組成，用于在一定范圍內(nèi)輸入、

調(diào)整數(shù)字。

4.3.14. 按鈕

按鈕用于觸發(fā)一個操作，如提交表單。

4.4.圖表組件

uCharts 是一款基于 canvas API 開發(fā)的適用于所有前端應(yīng)用的圖表庫，

開發(fā)者編寫一套代碼，可運行到 Web、iOS、Android（基于 uni-app /

taro ）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/

釘釘/淘寶/京東/360）、快應(yīng)用等更多支持 canvas API 的平臺。包括：

柱狀圖、山峰圖、條狀圖、折線圖、區(qū)域圖、散點圖、氣泡圖、混合

圖、餅狀圖、圓環(huán)圖、玫瑰圖、雷達圖、進度條、儀表盤、漏斗圖、

K 線圖、詞云圖、地圖

第五章 UniApp 進階

5.1.配置項

5.2.生命周期

5.3.頁面路由

5.4.JS 語法

5.5.CSS 語法

5.6.vue 語法

第六章 高級進階

6.1.UNIAPP

6.2.API 請求

6.3.事件交互

6.4.屬性綁定

6.5.事件綁定

第七章 頁面案例

7.1.用戶登錄頁

7.2.會員中心首頁

7.3.充值中心首頁

7.4.辦公系統(tǒng)首頁

7.5.基金理財首頁

第八章 項目演練-商城小程序 APP

8.1. 首頁框架搭建

8.2. 商品列表及詳情

8.3. 會員登錄

8.4. 購物車

8.5. 用戶訂單

8.6. 個人中心

8.7. 發(fā)布上線