微信小程式之購物車新手教程。登入成功、付款成功,而且還擁有了自己的一輛車:
購物車也發現了自己的不足之處:
餘額不足。
為大家介紹的就是購物車
這裡演示從商品列表中新增到購物車
下面先做商品列表頁。如下圖:
布局分析:
首先乙個list的主盒子,接著是item盒子,這是必須的。
然後把item分成左側的部分,和右側的說明部分(item盒子使用橫向彈性盒)
右側的說明部分又分上下2部分(右側說明部分盒子使用縱向彈性盒)
下面價錢購物車部分(下面價錢購物車部分也使用橫向彈性盒,中間使用justify-content: space-between;填充空白)
index.wxml:
[html] view plain copy
商品列表
更多
} ¥}
index.wxss:
[css] view plain copy
/**index.wxss**/
page
.container
.tit
.tit::before
.title_val{
padding: 0 15px;
font-size: 14px;
微信小程式之購物車demo
這篇小demo主要使用了一下幾個技術點 1 全域性變數的使用 在這裡定義的變數 任何乙個頁面和元件都可以訪問到 在使用到的頁面 宣告乙個例項 然後 這樣就可以訪問到 修改也可以直接修改 2 input元件的使用 這種把checkbox group 放在循壞裡面是不太好的 因為這樣列印那個事件e的話取...
微信小程式之購物車功能
先來弄清楚購物車的需求。根據設計圖,我們可以先實現靜態頁面。接下來,再看看乙個購物車需要什麼樣的資料。知道了需要這些資料,在頁面初始化的時候我們先定義好這些。page onshow 購物車列表資料我們一般是通過請求伺服器拿到的資料,所以我們放在生命週期函式裡給 carts 賦值。想到每次進到購物車都...
微信小程式之購物車功能
前言 以往的購物車,基本都是通過大量的 dom 操作來實現。微信小程式其實跟 vue.js 的用法非常像,接下來就看看小程式可以怎樣實現購物車功能。需求先來弄清楚購物車的需求。根據設計圖,我們可以先實現靜態頁面。接下來,再看看乙個購物車需要什麼樣的資料。知道了需要這些資料,在頁面初始化的時候我們先定...