Vue.js 超詳細入門與項目實戰(zhàn)（微課視頻版）課件 第15章 商品分類頁開發(fā)

第15章商品分類頁開發(fā)課件V1.0

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

分類頁查詢功能第二節(jié)分類左側導航第三節(jié)

分類右側列表知識目標教學目標理解和掌握

vant4

中

van-search

組件的應用掌握

van-sidebar組件的功能和應用方法掌握和理解

Vue3

中父子組件相互傳值的方法知識點預覽#節(jié)知識點難點重點應用15C15-01分類頁查詢功能1、頁面效果

2、組件代碼3、組件調(diào)用C15-02分類左側導航1、頁面效果2、組件代碼3、組件調(diào)用C15-03分類右側列表1、頁面效果2、組件代碼3、組件調(diào)用

商品分類別展示是商城項目開發(fā)時的一項重要功能，并且在展示時，由于商品類別眾多，還需要添加一個查詢功能，以方便用戶查找自己需要的類型。商品類別查詢功能通常放置在頁面的頂部，使用一個左側帶查詢圖標的文本輸入框，當用戶在輸入框中錄入查詢內(nèi)容時，列表區(qū)將自動顯示查詢的結果。分類頁查詢功能

在src/components目錄下，新建一個名稱為category的文件夾，該文件夾保存所有與商品分類有關的組件，它的目錄結構如圖所示。RtIndex是商品類別的首頁組件，它依賴的子類組件放置在components文件夾中，在該文件夾中，由名為RtSearch的組件實現(xiàn)查詢類別名稱的功能，使用van-search組件實現(xiàn)類別的查詢功能，組件的v-model屬性綁定輸入的查詢字符，input事件可以捕捉用戶在輸入時的實時內(nèi)容，并在該事件中，通過自定義組件事件的方式，將查詢的內(nèi)容返回給父類組件。組件代碼

所有的商品分類子組件，都被category文件夾中的RtIndex組件調(diào)用，該組件負責組合分類的各個子類功能組件。先導入RtSearch組件，然后在components對象中聲明導入的組件，最后，在模版中使用該組件，使用時，通過綁定組件自定義的onInputSearch事件，在該事件中，獲取到返回的查詢內(nèi)容，并根據(jù)內(nèi)容，通過includes方法過濾對應的記錄。組件調(diào)用在商品分類頁中，除了實現(xiàn)查詢類別名稱功能外，還需要實現(xiàn)左側焦點導航功能，即以選項卡的形式展示全部的類別名稱，當點擊某個名稱時，該名稱自動獲取選中焦點，同時，分類右側欄顯示對應名稱的類別列表。分類左側導航在目錄結構下，由名為RtCateLeft的組件實現(xiàn)分類左側導航條的功能。在代碼中，使用van-sidebar組件實現(xiàn)垂直方向的側邊欄，側邊欄中的全部選項則由van-sidebar-item組件綁定，van-sidebar組件通過change事件，可以獲取到切換側邊欄的索引號，并將該索引號，通過組件的自定義事件onChange，返回給父組件。組件代碼與調(diào)用分類查詢子組件相同，全部的分類子組件都被category文件夾中的RtIndex組件調(diào)用。在代碼中，當在模板中調(diào)用rt-cate-left組件時，需要通過屬性的方式向子組件傳遞左側全部顯示的分類名稱數(shù)據(jù)items，同時，當點擊左側導航條某個分類名稱時，觸發(fā)綁定的組件自定義的onChange事件，在該事件中，獲取返回的點擊索引號，并判斷該索引號的值是否為空，如果為空，則顯示全部，否則，根據(jù)該索引號過濾對應的記錄。組件調(diào)用分類頁的右側，是一個顯示結果的列表，當查詢內(nèi)容或左側導航選項發(fā)生變化時，該列表的顯示數(shù)據(jù)將會自動同步變更，實現(xiàn)用戶操作與數(shù)據(jù)展示實時同步的效果。分類右側列表在目錄結構下，由名為RtCateRight的組件實現(xiàn)分類右側列表顯示的功能。在代碼中，調(diào)用van-grid組件實現(xiàn)數(shù)據(jù)以列表形式展示，column-num屬性控制列表中每行顯示的列數(shù)，van-grid-item組件綁定每個單元格中的數(shù)據(jù)，并通過van-image組件顯示單元格中的圖片，全部的單元格數(shù)據(jù)，由組件的items屬性值傳入。組件代碼全部的分類子組件都被category文件夾中的RtIndex組件調(diào)用，它與同樣調(diào)用了分類右側列表子組件。通過導入、聲明并首次加載rt-cate-right組件時，將已獲取到默認右側列表數(shù)據(jù)的變量curItems，通過items屬性傳入