簡介

這是一個用微信小程序原生代碼實現的數量加減demo，主要是用于商品購物車或者商品詳情修改數量使用，很簡單哦~~~。

核心js方法說明addCount(增加數量)

delCount (減少數量)

getCount(獲取數量)

實現效果如下圖所示：

微信小程序實現一個簡單的商品數量加減案例

實現步驟

1、頁面布局

count.wxml 增加主容器代碼和提交button-

+

提交

2、添加頁面wcss樣式

count.css設置全局樣式

page {

background: #EDEDED;

}

設置主容器樣式/*主容器*/

.stepper {

width:130px;

height: 40px;

/*給主容器設一個邊框*/

border: 1rpx solid #818284;

border-radius: 3px;

margin:20px auto;

background: white;

}

/*加號和減號*/

.stepper .sign {

width: 40px;

line-height: 40px;

text-align: center;

float: left;

}

/*數值*/

.stepper .number {

width: 48px;

height: 40px;

float: left;

margin: 0 auto;

text-align: center;

font-size: 16px;

color: #000000;

/*給中間的input設置左右邊框即可*/

border-left: 1rpx solid #818284;

border-right: 1rpx solid #818284;

}

/*普通樣式*/

.stepper .normal{

color: black;

}

/*禁用樣式*/

.stepper .disabled{

color: #ccc;

}

設置button按鈕樣式button{

width: 90%;

color: white;

background:#DFB741;

margin:30px auto;

}

微信小程序實現一個簡單的商品數量加減案例

3、編寫js數據交互

數字初始化為1/**

* 頁面的初始數據

*/

data: {

num:1

},

addCount 點擊“+”號，增加數字/* 加數 */

addCount: function (e) {

console.log("剛剛您點擊了加1");

var num = this.data.num;

// 總數量-1

if (num < 1000) {

this.data.num++;

}

// 將數值與狀態寫回

this.setData({

num: this.data.num

});

},

delCount 點擊“-”號，減少數字/* 減數 */

delCount: function (e) {

console.log("剛剛您點擊了減1");

var num = this.data.num;

// 商品總數量-1

if (num > 1) {

this.data.num--;

}

// 將數值與狀態寫回

this.setData({

num: this.data.num

});

},

getCount 獲取設置的結果getCount: function (e) {

var num = this.data.num;

console.log(num);

wx.showToast({

title: "數量：" + num + "",

})

}

好了，demo已經完成感覺測試一下吧！

微信小程序微商城系列

微信小程序實戰篇：小程序之頁面數據傳遞

小程序微商城(一)：https框架搭建并實現導航功能

微信小程序微商城(二)：電商首頁輪播、分類導航和新品特賣實現

小程序微商城(三)：電商首頁無限下拉刷新動態API數據實現

微信小程序微商城(四)：動態API實現商品詳情頁(上)

微信小程序微商城(五)：動態API實現商品詳情頁(下)

微信小程序微商城(六)：動態API實現新品特賣商品流式布局

微信小程序微商城(七)：動態API實現商品分類

微信小程序微商城(八)：緩存實現商品購物車功能

微信小程序微商城(九)：微信授權并實現個人中心頁面頁面

微信小程序微商城(十)：用戶收貨地址管

備注

微信小程序微商城系列 都是通過https 動態獲取數據并展示的，建議從第一篇開始閱讀。大家多多支持本系列文章會繼續更新下去，謝謝各位！大家在使用過程中有哪些建議可以提出來，我們一起學習哈~~~

微信小程序實現一個簡單的商品數量加減案例

微信小程序實現一個簡單的商品數量加減案例

總結

以上是生活随笔為你收集整理的android商品数量加减,微信小程序实现一个简单的商品数量加减案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。