第14章商城首頁開發(fā)課件V1.0

教學(xué)內(nèi)容第一節(jié)

輪播和推薦商品第二節(jié)熱點(diǎn)商品列表第三節(jié)

底部導(dǎo)航條制作知識目標(biāo)教學(xué)目標(biāo)理解和掌握

vant4

中

van-swipe

組件的應(yīng)用掌握

van-grid組件的布局過程和應(yīng)用方法掌握

van-tabbar組件跳轉(zhuǎn)和焦點(diǎn)獲取方法知識點(diǎn)預(yù)覽#節(jié)知識點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用14C14-01輪播和推薦商品1、頁面效果

2、輪播圖制作3、爆款商品推薦C14-02熱點(diǎn)商品列表1、頁面效果2、列表數(shù)據(jù)源3、列表制作C14-03底部導(dǎo)航條制作1、頁面效果2、實(shí)現(xiàn)代碼3、調(diào)用導(dǎo)航條

首頁是商城的門面，布局結(jié)構(gòu)尤為重要，為了能動(dòng)態(tài)地展示更多的商品，通常會(huì)在頂部添加一個(gè)用輪播圖，并使用相關(guān)的功能導(dǎo)航條上下包裹它，使其結(jié)構(gòu)更加合理；同時(shí)，將重點(diǎn)需要推薦的爆款產(chǎn)品放置在底部的顯眼位置，共同組成了首頁的第一屏。頁面效果

第一屏頁面的制作由多個(gè)單獨(dú)的組件完成，為了方便按功能開發(fā)，首先在項(xiàng)目src/components目錄下，添加一個(gè)名稱為index的文件夾，用于保存所有制作首頁的組件。組件RtHeader用于顯示商城標(biāo)志和服務(wù)主旨。組件

RtSwipe

用于顯示首頁輪播圖的制作。組件

RtNav

用于導(dǎo)航條中的多圖顯示。輪播圖制作

首頁的第一屏由4款組件分別實(shí)現(xiàn)，第二屏是熱點(diǎn)商品列表，通過圖文并茂的形式，在一行中顯示兩個(gè)商品信息；商品信息源于一個(gè)JSON格式的數(shù)據(jù)源，并借助vant-grid組件，將數(shù)據(jù)源通過遍歷的形式，顯示在頁面組件中。熱點(diǎn)商品列表熱點(diǎn)商品的展示數(shù)據(jù)，源于shop.js文件中的

prod

屬性值。說明：在src/data目錄下，新建了一個(gè)名為shop.js，用于保存整個(gè)項(xiàng)目中頁面所使用的數(shù)據(jù)，該數(shù)據(jù)是一個(gè)對象，對象中的prods屬性值則是一個(gè)數(shù)組，用于保存項(xiàng)目中全部的商品數(shù)據(jù)信息，因此，熱點(diǎn)商品列表可以直接調(diào)用該數(shù)組。列表數(shù)據(jù)源確定列表調(diào)用的數(shù)據(jù)源后，接下來可以使用vant-grid組件展示數(shù)據(jù)源信息，該功能由組件RtSuggest完成。說明：使用宮格van-grid組件包裹遍歷的組件項(xiàng)van-grid-item，并通過插槽自定義格子展示商品內(nèi)容，column-num屬性設(shè)置宮格顯示的列數(shù)，當(dāng)單擊某格子時(shí)，觸發(fā)綁定的click事件，并執(zhí)行事件函數(shù)enter，在函數(shù)中，攜帶商品id，跳轉(zhuǎn)到商品詳細(xì)中。列表制作在移動(dòng)終端中，可以使用底部導(dǎo)航條，實(shí)現(xiàn)各頁面之間的相互切換，在

Vant4

中，底部導(dǎo)航條由van-tabbar組件來實(shí)現(xiàn)，由于它的功能針對的是整個(gè)項(xiàng)目，因此，在構(gòu)建時(shí)，該組件通常被放置在一個(gè)獨(dú)立的文件夾中。底部導(dǎo)航條制作由于底部導(dǎo)航條是一個(gè)全局的功能模塊，因此，在項(xiàng)目的

src/components目錄下，新建一個(gè)名稱為

bottom

的文件夾，在該文件夾下，新建一個(gè)名稱為

RtTabBar

的

vue

組件，在該組件中加入代碼。van-tabbar

組件用于構(gòu)建導(dǎo)航條的外圍結(jié)構(gòu)，v-model屬性值為綁定選中選項(xiàng)的索引值，通過修改v-model即可切換選中的選項(xiàng)；van-tabbar-item用于創(chuàng)建導(dǎo)航條中的各個(gè)選項(xiàng)，在選項(xiàng)中，to屬性值為跳轉(zhuǎn)的目標(biāo)路由對象，icon屬性值為選項(xiàng)的圖標(biāo)。說明：由于許多頁面在瀏覽詳細(xì)時(shí)，不再需要導(dǎo)航條，因此，在van-tabbar組件中，添加一個(gè)v-show屬性，它的屬性值blnShow則作為組件的屬性值，由其他組件在調(diào)用時(shí)動(dòng)態(tài)傳入，如果該值為true，則顯示底部導(dǎo)航條，否則，隱藏底部導(dǎo)航條。實(shí)現(xiàn)代碼在創(chuàng)建一個(gè)

Vue3

項(xiàng)目時(shí)，默認(rèn)項(xiàng)目的啟動(dòng)組件是根目錄下的

App.vue

文件，該文件也是整個(gè)項(xiàng)目的根組件，打開該文件，加入代碼。rt-tab-bar

用于顯示底部導(dǎo)航條，在調(diào)用該組件時(shí)，先使用

import

導(dǎo)入，再通過

components

對象聲明導(dǎo)入組件，最后才能在模版中直接調(diào)用，調(diào)用時(shí)，blnShow

屬性值為當(dāng)前路由中meta對象的

sho