網(wǎng)站關(guān)鍵詞搜不到站長(zhǎng)seo
文章目錄
- 一、列表渲染
- 二、刪除單品
- 1.封裝刪除API
- 2.按鈕綁定事件
- 三、修改單品數(shù)量
- 1.復(fù)用步進(jìn)器組件
- 2.屬性和事件的綁定
- 3.接口封裝
- 4.調(diào)用接口
- 四、修改商品選中/全選
- 1.單品選中綁定事件調(diào)用修改API
- 2.計(jì)算全選狀態(tài)
- 3.綁定事件調(diào)用全選API并渲染單品選中狀態(tài)
- 五、底部結(jié)算信息
- 1.計(jì)算選中單品列表
- 2.計(jì)算選中總件數(shù)
- 3.計(jì)算選中總金額
- 4. 結(jié)算按鈕交互
- 六、購(gòu)物車兩個(gè)頁(yè)面
一、列表渲染
購(gòu)物車模塊主要分為已登錄狀態(tài)顯示和未登錄狀態(tài)顯示。通過獲取會(huì)員Store進(jìn)行條件渲染，調(diào)用購(gòu)物車列表接口進(jìn)行渲染。
調(diào)用接口并渲染
二、刪除單品
1.封裝刪除API
2.按鈕綁定事件
三、修改單品數(shù)量
1.復(fù)用步進(jìn)器組件
購(gòu)物車的數(shù)量修改和SKU插件的類似，可直接復(fù)用
補(bǔ)充類型聲明文件讓組件類型更加安全。
import { Component } from '@uni-helper/uni-app-types'/** 步進(jìn)器 */
export type InputNumberBox = Component<InputNumberBoxProps>/** 步進(jìn)器實(shí)例 */
export type InputNumberBoxInstance = InstanceType<InputNumberBox>/** 步進(jìn)器屬性 */
expo