簡介

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

核心js方法說明

addCount(增加數量)
delCount (減少數量)
getCount(擷取數量)

實作效果如下圖所示：

微信小程式align_微信小程式實作商品數量加減案例簡介

實作步驟

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; }

微信小程式align_微信小程式實作商品數量加減案例簡介

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 +