一般餐廳需要有一些宣傳，在我們的點(diǎn)餐頁面可以在頂部加載廣告位。廣告主要是用輪播圖的形式進(jìn)行展示，本節(jié)我們介紹一下如果顯示廣告。

1 創(chuàng)建數(shù)據(jù)源

打開控制臺(tái)，點(diǎn)擊應(yīng)用，點(diǎn)擊前往云開發(fā)平臺(tái)

選擇云數(shù)據(jù)庫(kù)，點(diǎn)擊+號(hào)創(chuàng)建數(shù)據(jù)模型

選擇創(chuàng)建數(shù)據(jù)模型，選擇從空白創(chuàng)建，選擇文檔型數(shù)據(jù)庫(kù)

輸入模型名稱、模型標(biāo)識(shí)，創(chuàng)建圖片字段，類型選擇圖片

增加一個(gè)是否顯示的字段，類型選擇布爾值

切換到權(quán)限設(shè)置，將權(quán)限改為全部用戶可讀，管理員可寫

2 添加輪播容器

數(shù)據(jù)模型創(chuàng)建之后，目前只是提供了正式庫(kù)，我們需要從應(yīng)用部分切換到舊版編輯器，錄入數(shù)據(jù)。

點(diǎn)擊可視化開發(fā)，打開我們的小程序

點(diǎn)擊返回舊版編輯器

選擇數(shù)據(jù)源的圖標(biāo)

選擇我們剛剛創(chuàng)建的數(shù)據(jù)源，點(diǎn)擊添加一行

錄入測(cè)試數(shù)據(jù)

在頂部添加一個(gè)輪播容器

3 創(chuàng)建變量

輪播容器里的圖片我們需要從數(shù)據(jù)源中取出，為此需要?jiǎng)?chuàng)建一個(gè)變量用來讀取圖片信息。從當(dāng)前頁面創(chuàng)建變量，選擇新建內(nèi)置表查詢

數(shù)據(jù)源選擇廣告管理，觸發(fā)方式選擇入?yún)⒆兓瘯r(shí)自動(dòng)執(zhí)行

增加查詢條件，設(shè)置為是否顯示等于true

修改一下變量名稱為swaperList

4 綁定變量

變量創(chuàng)建好了之后就需要把變量的值綁定到組件上。我們目前創(chuàng)建的Query返回結(jié)果里，可以訪問records屬性得到數(shù)據(jù)，具體可以點(diǎn)擊變量的運(yùn)行看到返回的JSON數(shù)據(jù)

records本身是一個(gè)數(shù)組，可以用下標(biāo)去獲取具體的某條數(shù)據(jù)，返回的數(shù)據(jù)是個(gè)對(duì)象，可以用點(diǎn)的語法訪問具體的屬性

這個(gè)時(shí)候我們就可以給圖片綁定具體的地址了，先選中第一個(gè)圖片，在圖片地址的fx進(jìn)行綁定

逐級(jí)展開變量的屬性，選到最后的圖片，點(diǎn)擊在表達(dá)式里出現(xiàn)具體的值

這個(gè)時(shí)候第一張圖片就是我們從數(shù)據(jù)源中讀取的了

為了設(shè)置圖片的大小，需要先選擇圖片的布局模式為裁剪填滿

設(shè)置圖片的寬為100%，高為150px

給第二張圖片，綁定地址的時(shí)候我們要通過下標(biāo)取第二條數(shù)據(jù)

這里有一個(gè)知識(shí)點(diǎn)是，數(shù)組的下標(biāo)是從0開始計(jì)數(shù)的，因此我們的第二張圖片的下標(biāo)是填寫1

5 預(yù)覽應(yīng)用

點(diǎn)擊實(shí)時(shí)預(yù)覽的圖標(biāo)，就可以看到最終的效果

總結(jié)

我們本篇介紹了輪播圖組件如何配置，配置的步驟包括創(chuàng)建數(shù)據(jù)源，錄入測(cè)試數(shù)據(jù)，創(chuàng)建變量以及變量綁定。介紹了數(shù)組如何通過下標(biāo)獲取元素，這些基本操作是必須要掌握的，隨著應(yīng)用的開發(fā)的深入，處處都體現(xiàn)基本功。