版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
第16章商城動態(tài)頁開發(fā)課件V1.0
教學內容第一節(jié)
動態(tài)列表頁功能第二節(jié)列表詳情頁功能第三節(jié)
點贊與收藏功能知識目標教學目標理解和掌握路由傳參的方法和使用過程掌握pinia中定義狀態(tài)變量和方法的過程掌握在組件中使用pinia定義的變量和方法知識點預覽#節(jié)知識點難點重點應用16C16-01動態(tài)列表頁功能1、頁面效果
2、列表數據源3、列表制作C16-02列表詳情頁功能1、頁面效果2、組件代碼C16-03Vant表單組件1、頁面效果2、組件代碼3、全局狀態(tài)與方法
商城動態(tài)也是商城開發(fā)中的一項重要功能,動態(tài)內容可以是商品信息,也可以是促銷文章,通常以列表的形式展示,點擊列表中標題后查看詳情頁。動態(tài)列表頁功能
動態(tài)列表的展示數據,源于
shop.js
文件中的
news
屬性值。說明:數組
news
中的對象屬性
src,用于顯示列表中的縮略圖片,detail
屬性則用于顯示動態(tài)列表中某項數據的詳細內容,因為該數據是由后臺文本編輯器創(chuàng)建,因此,它的內容中包含了各種
HTML5
元素和布局的樣式。列表數據源
在src/components目錄下,新建一個名稱為news的文件夾,該文件夾保存所有與商城動態(tài)有關的組件,目錄結構如圖所示。在示意圖中,RtList是商城動態(tài)的列表組件,在組件中,獲取列表數據,并通過遍歷的方式展示在van-grid組件中。在代碼中,通過van-grid組件展示列表,column-num屬性設置列表只顯示一列,再遍歷van-grid-item組件,綁定各行中顯示的數據,當點擊某一行時,觸發(fā)綁定的click事件函數onNavTo,在該函數中,獲取并攜帶傳入的動態(tài)Id值,跳轉到動態(tài)詳細頁中。列表制作
在動態(tài)列表頁中,當用戶點擊某項列表時,便攜帶該項列表的Id號,跳轉至列表詳情頁,在列表詳情頁中,獲取轉入的Id號,并根據該Id號,獲取對應的詳情頁數據,再將該數據通過綁定組件的形式,顯示到頁面模板中。列表詳情頁功能
在示意圖中,由名為
RtDisplay的組件實現的功能。在代碼中,先獲取通過路由傳入的Id號,并根據該Id號獲取對應的數據記錄,并將記錄保存在變量curNews中,再將變量curNews中的detail屬性值綁定元素,從而實現對應Id號詳情的顯示效果。說明:在綁定并顯示含有HTML5元素內容的數據時,需要使用v-html指令的格式,因為這種格式綁定的內容,會將綁定的內容用HTML格式解析后再輸出。組件代碼
在列表詳情頁的底部,添加了兩個按鈕,一個用于點贊功能,另一個用于收藏功能,兩個按鈕單擊后的數據和狀態(tài)變化,全部通過pinia狀態(tài)工具進行保存。點贊與收藏功能在示意圖中,由名為
RtAction的組件實現詳細頁底部點贊和收藏的功能。在代碼中,當點擊“點贊”按鈕時,觸發(fā)pinia中定義的方法add_like_act,在該方法中,將會向數據集合中增加一條對應Id號的記錄,同時,再通過retNewsLikes函數檢測該條記錄是否增加成功,如果成功,則改變按鈕的icon圖標。當擊“收藏”按鈕時,觸發(fā)pinia中定義的方法add_collect_act,它的功能邏輯與點擊“點贊”按鈕基本相似,僅僅是執(zhí)行了不同的方法,這兩個方法都是在pinia中定義的。組件代碼
為了全局性管理組件的狀態(tài)和數據,本項目中安裝了pinia工具,安裝成功后,在src目錄下創(chuàng)建了一個名稱為store子文件夾,并在該文件夾下,創(chuàng)建了一個index.js的文件,用于實例化pinia對象,并緩存定義的狀態(tài)變量。在代碼的加粗部分中,先在state函數中,返回兩個全局的狀態(tài)數組變量,一個名為collects,另一個名為likes,前者用于保存收藏記錄,后者用于保存點贊記錄。為了能操作這兩個變量,在actions對象中,定義了兩個相應的方法。最后,在persist對象中,通過strategies數組配置需要緩存的狀態(tài)變量,其中,
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年應急預案演練計劃 - 副本
- 文獻翻譯NUB1是加強蛋白降解的變異亨廷頓蛋白毒性抑制劑的確認
- 寶雞文理學院《思想政治學科教學論》2021-2022學年第一學期期末試卷
- 寶雞文理學院《理論力學》2022-2023學年第一學期期末試卷
- 印刷膠版項目可行性實施報告
- 手動磨砂機項目評價分析報告
- 放射性測量儀器項目評價分析報告
- 帶兜帽的風雪大衣項目評價分析報告
- 木材干餾設備項目可行性實施報告
- 2024年物品采購管理制度
- 醫(yī)院細菌耐藥監(jiān)測報告
- 春天的暢想 課件-2023-2024學年人教版初中美術七年級下冊
- 江西省景德鎮(zhèn)市2023-2024學年七年級上學期期中數學試卷
- 印刷品服務投標方案(技術標)(宣傳印刷品、業(yè)務資料等)
- 吊裝作業(yè)票(樣本)
- 中學生心理發(fā)展特點
- 過濾器檢修施工方案
- 《精益生產實務》 課件6.9物料接收
- 壓力性損傷管理制度范文
- 捺的寫法書法ppt課件講課講稿
- (新版)老年人能力評估師理論考試復習題庫(含答案)
評論
0/150
提交評論