第14章商城首頁開發課件V1.0

教學內容第一節

輪播和推薦商品第二節熱點商品列表第三節

底部導航條制作知識目標教學目標理解和掌握

vant4

中

van-swipe

組件的應用掌握

van-grid組件的布局過程和應用方法掌握

van-tabbar組件跳轉和焦點獲取方法知識點預覽#節知識點難點重點應用14C14-01輪播和推薦商品1、頁面效果

2、輪播圖制作3、爆款商品推薦C14-02熱點商品列表1、頁面效果2、列表數據源3、列表制作C14-03底部導航條制作1、頁面效果2、實現代碼3、調用導航條

首頁是商城的門面，布局結構尤為重要，為了能動態地展示更多的商品，通常會在頂部添加一個用輪播圖，并使用相關的功能導航條上下包裹它，使其結構更加合理；同時，將重點需要推薦的爆款產品放置在底部的顯眼位置，共同組成了首頁的第一屏。頁面效果

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

RtSwipe

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

RtNav

用于導航條中的多圖顯示。輪播圖制作

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

prod

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

Vant4

中，底部導航條由van-tabbar組件來實現，由于它的功能針對的是整個項目，因此，在構建時，該組件通常被放置在一個獨立的文件夾中。底部導航條制作由于底部導航條是一個全局的功能模塊，因此，在項目的

src/components目錄下，新建一個名稱為

bottom

的文件夾，在該文件夾下，新建一個名稱為

RtTabBar

的

vue

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

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

Vue3

項目時，默認項目的啟動組件是根目錄下的

App.vue

文件，該文件也是整個項目的根組件，打開該文件，加入代碼。rt-tab-bar

用于顯示底部導航條，在調用該組件時，先使用

import

導入，再通過

components

對象聲明導入組件，最后才能在模版中直接調用，調用時，blnShow

屬性值為當前路由中meta對象的

sho