1. 首頁 > 生活 > >

JS 輪播圖 js輪播圖菜鳥教程

小知識



文章插圖
JS 輪播圖 js輪播圖菜鳥教程

文章插圖
五，首頁輪播圖的實現
我們這一節要來實現首頁頂部的輪播圖功能 。老規矩，先看效果圖
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，優化輪播圖
【JS 輪播圖 js輪播圖菜鳥教程】首先設置圖片的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：自動輪播這樣我們完整的輪播圖功能就實現了 。關于輪播圖的點擊和跳轉，我們后面章節再做講解，這節主要是帶大家實現動態的輪播圖功能 。