微信小程序實現商品數量加減案例

簡介

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

核心js方法說明

• addCount（增加數量）
• delCount （減少數量）
• getCount（獲取數量）

實現效果如下圖所示：

實現步驟

1、頁面佈局

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

<!-- 主容器 -->  
  <view class="stepper">  
      <!-- 減號 -->  
      <text class="sign {{num <= 1 ? 'disabled' : 'normal'}}" bindtap="delCount" data-index="{{index}}">-</text>  
      <!-- 數值 -->  
      <input class="number" type="number" bindchange="bindManual" value="{{num}}"  disabled="disabled"/>  
      <!-- 加號 -->  
      <text class="sign {{num >= 10 ? 'disabled' : 'normal'}}" bindtap="addCount" data-index="{{index}}">+</text>  
  </view>  
<button bindtap="getCount">提交</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 動態獲取數據並展示的，建議從第一篇開始閱讀。大家多多支持本系列文章會繼續更新下去，謝謝各位！大家在使用過程中有哪些建議可以提出來，我們一起學習哈~~~

微信小程序微商城系列

微信小程序微商城：開發者key獲取
微信小程序微商城（一）：https框架搭建並實現導航功能
微信小程序微商城（二）：電商首頁輪播、分類導航和新品特賣實現
微信小程序微商城（三）：電商首頁福利專場無限下拉刷新動態API數據實現
微信小程序微商城（四）：動態API實現商品詳情頁（上）
微信小程序微商城（五）：動態API實現商品詳情頁（下）
微信小程序微商城（六）：動態API實現新品特賣商品流式佈局
微信小程序微商城（七）：動態API實現商品分類
微信小程序微商城（八）：緩存實現商品購物車功能
微信小程序微商城（九）：微信授權並實現個人中心頁面頁面
微信小程序微商城（十）：用戶收貨地址管理

更多精彩內容可以關注“IT實戰聯盟”公衆號哦~~~