微信小程式之購物車新手教程

2022-09-22 22:18:18 字數 661 閱讀 1786

微信小程式之購物車新手教程。登入成功、付款成功,而且還擁有了自己的一輛車:

購物車也發現了自己的不足之處:

餘額不足。

為大家介紹的就是購物車

這裡演示從商品列表中新增到購物車

下面先做商品列表頁。如下圖:

布局分析:

首先乙個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 的用法非常像,接下來就看看小程式可以怎樣實現購物車功能。需求先來弄清楚購物車的需求。根據設計圖,我們可以先實現靜態頁面。接下來,再看看乙個購物車需要什麼樣的資料。知道了需要這些資料,在頁面初始化的時候我們先定...