我們上一篇講解了基礎(chǔ)布局組件，講解了普通容器和文本組件的用法，本篇我們繼續(xù)介紹布局組件。

小程序中經(jīng)常會有個功能是輪播圖展示的功能，多張圖片可以順序進(jìn)行切換。我們學(xué)習(xí)使用輪播容器的時候，先考慮切換的圖片從哪來，通常圖片都是存儲到數(shù)據(jù)庫中，輪播圖通過調(diào)取數(shù)據(jù)庫中的圖片進(jìn)行切換。

01 建立數(shù)據(jù)源

登錄微搭控制臺，點擊數(shù)據(jù)模型，點擊新建數(shù)據(jù)模型

輸入數(shù)據(jù)模型的名稱，會根據(jù)名稱自動生成標(biāo)識

點擊右上角的編輯按鈕，添加字段

點擊添加字段，我們增加一個圖片類型的字段

回到數(shù)據(jù)模型的列表頁面，點擊管理數(shù)據(jù)，我們添加一些測試數(shù)據(jù)

02 定義變量

我們的需求是從數(shù)據(jù)源中讀取圖片，就需要創(chuàng)建一個變量用來存放我們從數(shù)據(jù)源讀取到的數(shù)據(jù)。

在應(yīng)用模塊，點擊編輯應(yīng)用，進(jìn)入我們已經(jīng)創(chuàng)建好的應(yīng)用

打開應(yīng)用編輯器，點擊頂部導(dǎo)航條上的變量

點擊新建變量

輸入變量名，類型選擇對象，選擇我們剛剛創(chuàng)建的數(shù)據(jù)源

03 數(shù)據(jù)綁定

現(xiàn)在我們變量已經(jīng)定義好了，微搭中將變量中存放的數(shù)據(jù)顯示到頁面上的概念叫數(shù)據(jù)綁定。輪播容器因為需要顯示多張圖片，就需要綁定循環(huán)展示。

先往頁面中添加輪播容器組件

輪播容器自帶三張圖片進(jìn)行切換，我們只保留一個圖片組件

選中圖片組件，點擊循環(huán)展示旁邊的超鏈接圖標(biāo)

選擇我們剛剛定義的數(shù)組變量

然后給圖片組件的地址屬性綁定變量，我們從循環(huán)對象里選擇圖片字段

這樣一個輪播容器就配置好了

總結(jié)

像輪播容器這種需要從數(shù)據(jù)源讀取數(shù)據(jù)的組件，總是先需要考慮定義數(shù)據(jù)源的結(jié)構(gòu)，也就是考慮數(shù)據(jù)源都需要哪些字段，字段的類型選擇什么。

構(gòu)造好數(shù)據(jù)源之后，在編輯器中想調(diào)取數(shù)據(jù)的，需要定義變量。最后的一步配置就是根據(jù)組件的各類屬性，做數(shù)據(jù)綁定。不同的屬性需要選擇不同類型的變量。

像我們的循環(huán)展示，我們需要綁定為數(shù)組，而我們的圖片的地址則需要綁定為文本類型的變量。

還有一點需要注意的就是，真正我們的循環(huán)內(nèi)容是從循環(huán)變量里選擇對應(yīng)的字段。

以上就是今天講解的全部內(nèi)容。