Categories
程式開發

高仿瑞幸小程序 03 創建輪播圖


高仿瑞幸小程序 03  創建輪播圖

輪播圖是我們常見的一種表現形式,通常,圖片之間要做到無縫銜接循環需要花一些功夫,而小程序提供的組件就已經可以實現。可以說省去了開發者不少的時間。

所以,今天我們要一起來學習以下幾件事:

1 學會使用雲存儲2 學會使用image組件3 簡單自定義navigation4 學會使用swiper組件來創建輪播圖

一 雲存儲的使用

讓我們一步一步的來,首先我們需要給小程序的首頁創建一個背景。如下圖

高仿瑞幸小程序 03 創建輪播圖 1

在這裡,背景圖片我放到了雲存儲上。要知道,當我們創建小程序後,我們有5G存儲空間和5G的流量可以免費使用。這足夠我們開發使用了。

那麼,怎麼把背景圖圖片放到雲存儲上呢?我們在微信開發者工具的頂部找到“雲開發”按鈕。

高仿瑞幸小程序 03 創建輪播圖 2

這時候,我們會打開“雲開發控制台”。我們再點擊“存儲”按鈕,就來到了雲存儲的管理界面。如下圖

高仿瑞幸小程序 03 創建輪播圖 3

我們可以通過“新建文件夾”來進行分類管理。想我,我就創建了“images”文件夾,同時在images文件夾下面根據Tabbar又創建了。 “home”,“menu”,“cart”,“order”和“my”五個文件夾。

因為我們現在在創建首頁嘛,所以我會把首頁下的相關圖片都放在home文件夾下。雲存儲不僅能存圖片,還能存放其他文件,這裡就不細講了。

我們可以點擊“上傳文件”按鈕,將今天所需的圖片素材,傳到雲存儲上。我將背景圖和今天輪播圖所需的圖片都傳到了“images/home”文件夾下。

我們的image組件能直接使用File ID,省卻了地址轉換的麻煩。 File ID的地址如下圖所示。

高仿瑞幸小程序 03 創建輪播圖 4

上圖紅框所標示的地址就是我們背景圖片的地址,讓我們複製一下,接下來馬上就會用到。

二 利用image組件創建背景

接下來,我們需要使用的是image組件,我們將通過改變它的z坐標將它放置在其他組件的“下面”,這樣就變成了home頁面的背景了。為什麼不用css中的background-image呢?因為這個屬性必須使用網絡圖片或者base64圖片。而我們的雲存儲的File ID地址必須要轉換一下才能獲得真實地址,所以太麻煩,不如直接用image來的快。

好,接下來看看怎麼使用image組件。

首先,我們用view給整個試圖創建一個根容器,仿造html,我們給class起名為body

接著,我們在其中放入image組件,背景圖片

高仿瑞幸小程序 03 創建輪播圖 5

我們給image 的class屬性賦值為bg。接下我們到home.wxss中做一些工作。

首先,我們讓body橫向撐滿整個屏幕

.body{

  width: 100%;

}

接下來,我們要將改變image組件的z坐標了。

.bg{

  /*fixed 固定位置 absolute 跟随屏幕滚动 */

  position: absolute; 

  top: 0;

  z-index: -100;

}

z-index就是我們所說的z坐標了。什麼是z坐標呢,我們知道橫軸是x坐標,豎軸是y坐標。 xy組成了一個平面,也就是我們的手機屏幕。那麼垂直與手機屏幕的就是z坐標。 z坐標的值越小,就在越後面,也就會被擋住。那麼當我們把z-index設為-100的時候,image就位於其他組件的下方了。

很好,如果一切正確,將會看到如下畫面。

高仿瑞幸小程序 03 創建輪播圖 6

這和我們所期望的效果有些不一樣?我們期待的效果是沒有頂部的navigation的對不對?不要著急,接下來我們就來解決這個問題。

三 簡單自定義navigation

其實要讓頂部的navigation消失非常簡單,我們只需要打開“pages/home/home.json”,添加

"navigationStyle": “custom",

即可,這行代碼的意思就是,我們將使用自定義的navigation。我們只要什麼都不做,就讓將默認的navigarion消失了。如下圖所示

高仿瑞幸小程序 03 創建輪播圖 1

至於如何自定義復雜的navigation,這就不是本節的內容了。

四 創建輪播圖

如何創建輪播圖呢?答案是,使用小程序提供的swiper組件。使用swiper組件,一切都將變得非常的簡單。

1 我們將在home.wxml中創建swiper2 我們將在home.js中定義輪播圖的數據3 我們將在home.js中定義swiper所需要的定位數據

首先,讓我們創建swiper

  高仿瑞幸小程序 03 創建輪播圖 8

我在創建swiper之前,會在其外面套一層view,用來做定位以及樣式相關控制。那麼就來看看我都對view做了什麼樣的樣式控制。

.swiper{

  margin-left: 20rpx;

  margin-right: 20rpx;

  border-radius: 30rpx;

  /* 使内容同样获得圆角 */

  overflow: hidden;

  /* transform: translateY(0); */

}

在這裡,我們通過margin-left設置了左邊距離屏幕20rpx,margin-right右邊距也是20rpx,border-radius設置了圓角矩形的半徑為30rpx,最後,為了讓view所包含的swiper也能有圓角效果,我們還需要將overflow設置為hidder。

知識點,我們知道px是像素的意思,那麼rpx是什麼樣的尺寸呢?以往我們在開發手機app的時候,為了在不同尺寸的屏幕上顯示一樣的設計效果,我們需要根據尺寸的不同進行一定的換算。如果使用rpx則可以進行自適應了,省卻了換算的麻煩。

至此,我們就完成了外層樣式的設定,接下來,讓我們回到home.wxml中,看看swiper的代碼都是什麼意思。

在swiper標籤中,我們能看到屬性circular 設為了true

circular = “{{true}}"

這表示,我們開啟了循環輪播,大家可以把這個屬性去掉,看看有什麼不同的效果。

bindanimationfinish=“onFinish”標示,我們在每個圖片切換動畫完成後,會執行onFinish函數。

indicator-dots=“{{true}}” 表示輪播圖將會顯示指示小圓點

indicator-active-color=“#ffffff” 表示選中的小圓點的顏色,這裡我設置為了白色。

interval=“{{2000}}” 表示圖片的切換相隔2000毫秒也就是2秒

duration=“{{500}}” 表示切換動畫持續時間為0.5秒

以上就是關於swiper的基本設置。

接下來,我們將會用block來設置swiper的數據源以及通過swiper-item來設置輪播的圖片。在代碼中,我們可以看到block標籤。這是wxml的語法標籤。在這個標籤下,我們能夠有限的使用一些流程控制語法。

例如在這一節中,我們使用的 wx:for,它可以綁定一個數組,將多個字節點渲染出來。

wx:for 我們綁定的是組件home.js中的一個數組swiperData,和頁面的js一樣,放在data對像中。

data: {  

  swiperData: [

      "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/DC240B320F4-1.jpeg",

      "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/6C04DA13FC28-1.jpeg",

      "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/DA98AD7CF153-1.jpeg",

      "cloud://myluckin-unux5.6d79-myluckin-unux5-1302022060/images/home/87542BE16ED7-1.jpeg"

    ],

}

而wx:key這是用來給for中的每一個子項一個唯一標識的,這樣可以在數據源有改動時,原有的子對象能保留狀態,例如文本框裡輸入的內容。

wx:key 的值以兩種形式提供

1 字符串,代表在 for 循環的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字符串或數字,且不能動態改變。 2 保留關鍵字 *this 代表在 for 循環中的 item 本身,這種表示需要 item 本身是一個唯一的字符串或者數字。

我們的輪播圖,用的是*this。

swiper-item 標籤僅可放在swiper標籤中,寬高自動設置為100%。我們在swiper-item中再放一個image組件。我們只需要把image的屬性src賦值即可。那麼我們怎麼獲得swiperData數組中的元素呢?很簡單,在wx:for遍歷數組的時候,item就代表著數組中的元素。即:

高仿瑞幸小程序 03 創建輪播圖 8

此時,在我們的微信開發者工具的模擬器中,我們看到的是醬嬸的:

高仿瑞幸小程序 03 創建輪播圖 10

我們發現,輪播圖的位置距離頂部太近了,我們至少要把狀態欄和標題欄空出來。

狀態欄和標題欄的高度,我們可以通過系統動態獲取。所以我們組件home.js中,預留兩個屬性

statusBarHeight: 0,

titleBarHeight: 0,

這兩個屬性的值,我們會在組件進入頁面時進行賦值。這樣,在組件被渲染時就能拿來用了。

我們要做什麼來著?為了讓輪播組件下來一點。所以我們可以在承載swiper的view中這麼寫。

style="margin-top:{{(titleBarHeight + statusBarHeight)}}rpx;height {{((wx.getSystemInfo().windowWidth - 40)*540/1065)}}rpx;”

這是一種編寫樣式的方式,為什麼寫在在wxml中,這是為了能夠動態的使用statusBarHeight和titleBarHeight。

我們注意到,除了使用margin-top,這個用來設定定邊距的屬性之外,我們還設置了height的值,也就是輪播組件的高度。這裡有一個小公式。用來根據屏幕寬度動態計算輪播組件的高度。

按比例拉升的公式是這樣的:

根據 輪播組件高/輪播組件的寬 = 圖片高/圖片寬

可以推導出 輪播組件的高 = 輪播組件的寬 * 圖片高/圖片寬

圖片的高寬,我們是可以知道的,分別為540和1065,自己搞得圖片嘛,當然知道saize。那輪播組件的寬呢?等於屏幕的寬wx.getSystemInfo().windowWidth 減去 左右邊距即40

所以輪播組件的高 = wx.getSystemInfo().windowWidth – 40)*540/1065

如果看到這裡還沒有頭昏腦脹的話,我們繼續往下看,如何獲得statusBarHeight和titleBarHeight的值?我們可以通過微信提供的api:getSystemInfo獲得。代碼如下

attached() {

    var statusBarHeight = 0

    var titleBarHeight = 0

    wx.getSystemInfo({

      success: (res) => {

        statusBarHeight = res.statusBarHeight

        titleBarHeight = wx.getMenuButtonBoundingClientRect().bottom + wx.getMenuButtonBoundingClientRect().top - (res.statusBarHeight * 2)

      },

      failure() {

        statusBarHeight = 0

        titleBarHeight = 0

      }

    })

    this.setData({

      statusBarHeight: statusBarHeight,

      titleBarHeight: titleBarHeight

    })

},

大家注意到,我們在計算titleBarHeight的時候,調用了wx.getMenuButtonBoundingClientRect這個api,這是什麼呢?這個api能獲取微信右上角膠囊按鈕的佈局信息。

好有一個新的知識點需要學習一下,就是在組件中,attached函數是乾嘛的?這是組件生命週期的一個函數,當在組件實例進入頁面節點樹時就會執行,在我們的實例中,我們正是利用這個函數給我們的組件的頂邊距賦值的。讓我們看看最後的效果圖吧

高仿瑞幸小程序 03 創建輪播圖 11

好了,今天的內容就到這裡,歡迎大家留言討論。我們下一節將和大家一起探討,小程序中的全局變量該怎麼用。

我們的源碼地址是

https://github.com/gogoswift/luckin