為大家介紹的就是購(gòu)物車，這里演示從商品列表中添加到購(gòu)物車。

  下面先做商品列表頁(yè)。如下圖：

  布局分析：

  首先一個(gè)list的主盒子，接著是item盒子，這是必須的。然后把item分成左側(cè)的圖片部分，和右側(cè)的說(shuō)明部分（item盒子使用橫向彈性盒）右側(cè)的說(shuō)明部分又分上下2部分（右側(cè)說(shuō)明部分盒子使用縱向彈性盒）下面價(jià)錢購(gòu)物車部分（下面價(jià)錢購(gòu)物車部分也使用橫向彈性盒，中間使用justify-content: space-between;填充空白）

  數(shù)據(jù)部分，一般情況都是訪問(wèn)接口獲取數(shù)據(jù)的，這里并沒(méi)有使用網(wǎng)絡(luò)訪問(wèn)，為了簡(jiǎn)化demo，直接把一組數(shù)據(jù)放在data對(duì)象中。同學(xué)們可以根據(jù)其數(shù)據(jù)結(jié)構(gòu)自己編寫后臺(tái)接口。

  編寫購(gòu)物車部分，如下圖所示：

  布局分析：

  首先一個(gè)list的主盒子，接著是item盒子，這是必須的。

  然后把item分成左側(cè)的圖片部分，和右側(cè)的說(shuō)明部分（item盒子使用橫向彈性盒）

  右側(cè)的說(shuō)明部分又分上下2部分（右側(cè)說(shuō)明部分盒子使用縱向彈性盒）

  下面價(jià)錢、購(gòu)物加減、購(gòu)物車部分（使用縱向彈性盒）

  最下面的購(gòu)物加減、購(gòu)物車部分（使用橫向彈性盒，中間使用justify-content: space-between;填充空白）

  運(yùn)行結(jié)果：

  demo：相關(guān)閱讀：

  微信小程序?qū)崙?zhàn)商城系列（4）—— 商品屬性分類

  微信小程序?qū)崙?zhàn)商城系列（3）—— 購(gòu)物數(shù)量加減

  微信小程序?qū)崙?zhàn)商城系列（2）—— 仿淘寶分類入口

  微信小程序?qū)崙?zhàn)商城系列（1）—— 側(cè)欄分類