五，首頁輪播圖的實現

我們這一節要來實現首頁頂部的輪播圖功能。
老規矩，先看效果圖

5-1，開通雲開發

由於我們的頂部輪播圖要做成動態的數據，所以這個數據就要存到資料庫里。常用的存儲數據的資料庫有下面幾種

• 雲開發自帶的資料庫
• mysql資料庫

由於mysql資料庫需要用Java，php或者python來開發後台，比較麻煩，所以我們這裡還是用我們雲開發自帶的資料庫比較好些。

關於雲開發的開通和一些雲開發的基礎知識，不是本節的重點，我之前雲開發基礎課里有講過，如果你沒有雲開發基礎可以去翻看我的雲開發課程
《零基礎入門小程序雲開發》
也可以去b站搜索『編程小石頭』觀看石頭哥給大家提供的福利視頻課。

大家開通好雲開發以後，記得要在app.js里進行雲開發環境初始化

5-1-1，雲開發環境初始化

我們上面創建好雲開發以後，就要去雲開發控制台獲取雲開發環境id了。

這裡的雲開發環境id，建議大家直接複製，不要手寫，很容易寫錯的。

如上圖，就可以在app.js里做雲開發環境的初始化了。只有初始化好雲開發環境id，我們才可以使用雲開發功能。

5-1-2，創建首頁輪播圖對應的數據集合

我們這裡創建一個數據表，小程序雲開發里叫數據集合。

如上圖所示，我們創建一個名為homeImgs的數據集合，用於存放首頁輪播圖的圖片鏈接。

5-2，上傳圖片到雲存儲

我們的圖片如果想動態更新，就要想辦法把圖片存儲到雲伺服器里，雲開發的雲存儲功能就為我們很好的存放圖片。這裡教大家如何把圖片存儲到雲存儲里。
首先進入雲開發控制台，找到雲存儲。

然後進入我們新創建的這個文件夾，就可以點擊「上傳文件」進行文件上傳了

然後我們隨便點擊一個我們上傳的圖片，就可以拿到圖片對應的鏈接了

https開頭的圖片鏈接，可以直接在瀏覽器里打開。

但是這個https開頭的鏈接有對應的有效期。所以我們的圖片如果是在小程序里展示，建議大家使用這個cloud開頭的圖片鏈接。

cloud開頭的這個鏈接在瀏覽器里不能顯示，但是在我們的小程序里是可以顯示的，並且是永久有效的。

5-3，添加圖片鏈接到輪播圖集合里

我們上面已經能拿到圖片的鏈接了，那麼就可以把拿到的圖片鏈接添加到我們的輪播圖集合里了。

如果我們首頁輪播圖想顯示多個圖片的話，就可以把我們多個圖片鏈接都添加進來。

這裡要記得每個數據里都是用imgUrl欄位來保存圖片鏈接的。

5-4，首頁獲取輪播圖數據

我們數據都已經準備好了，接下來就是要在小程序里請求雲開發資料庫里存儲的數據了，我們後期只需要改變雲開發資料庫里的數據，小程序里的數據就可以動態改變了。
我們在home.js里定義請求數據的方法如下。

可以看到我們請求數據成功了，但是列印的時候卻是空數據。這是因為我們的雲開發資料庫許可權要設置成所有人可讀。

因為我們創建homeImgs集合時，默認的是僅創建者可讀寫。所以我們直接在小程序里請求時，是請求不到數據的。這裡把許可權改為所有用戶可讀即可。
我們再來請求下數據看看。

這個時候我們添加的3條圖片鏈接數據就可以全部請求到了。接下來我們就要把這些數據顯示到頁面上了

5-5，渲染頂部輪播圖

我們要藉助swiper和swiper-item組件在頁面里渲染頂部輪播圖，所以要在home.wxml里定義如下的代碼。

然後home.js里的代碼也要稍做改造。

這樣我們的數據就可以在頁面上顯示出來了。

但是我們這裡有問題

• 1，圖片沒有鋪滿全屏
• 2，輪播圖的提示點也沒有
• 3，輪播圖不能自動滾動
  下面我們就來解決這些問題

5-6，優化輪播圖

首先設置圖片的mode，讓圖片鋪滿。這裡用到了image的mode屬性，如下圖。

我把官方文檔的鏈接給到大家：

https://developers.weixin.qq.com/miniprogram/dev/component/image.html
這裡的mode裁剪模式，大家可以根據自己的需求設置。

home.wxml代碼如下：

home.wxss里的代碼如下：

可以看出，我們的圖片這個時候撐滿了屏幕，但是會有裁剪

這個取決於我們image組件的mode裁剪參數的設置，至於設置哪種裁剪模式，這個你可以根據自己的業務場景來定，最好的是設計出來的圖片完全符合比例。這樣就不會有裁剪的問題了。

5-7，設置自動輪播

我們要設置輪播圖的自動輪播等屬於，其實就是來設置swiper組件的一些屬性。其實官方都有給出來的。

這裡也把對應的官方文檔鏈接給到大家，大家可以根據自己的需求去做設置。

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
我這裡只設置下面兩個屬性

• indicator-dots：顯示指示點
• autoplay：自動輪播
  這樣我們完整的輪播圖功能就實現了。關於輪播圖的點擊和跳轉，我們後面章節再做講解，這節主要是帶大家實現動態的輪播圖功能。