微信小程序实现商品数量加减案例

骑猪看日落 2022-02-16 01:39 716阅读 0赞

# 简介 #

这是一个用微信小程序原生代码实现的数量加减demo，主要是用于商品购物车或者商品详情修改数量使用，很简单哦~~~。

**核心js方法说明**

*  addCount（增加数量）
 *  delCount （减少数量）
 *  getCount（获取数量）

实现效果如下图所示：  
![实现效果.gif][.gif]

#### 实现步骤 ####

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

![关注我们][1240]

设置主容器样式

/*主容器*/  
    .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已经完成感觉测试一下吧！  
![关注我们][1240 1]

#### 备注 ####

微信小程序微商城系列 都是通过https 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~

#### 微信小程序微商城系列 ####

[微信小程序微商城：开发者key获取][key]  
[微信小程序微商城（一）：https框架搭建并实现导航功能][https]  
[微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现][Link 1]  
[微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现][API]  
[微信小程序微商城（四）：动态API实现商品详情页（上）][API]  
[微信小程序微商城（五）：动态API实现商品详情页（下）][API 1]  
[微信小程序微商城（六）：动态API实现新品特卖商品流式布局][API 2]  
[微信小程序微商城（七）：动态API实现商品分类][API 3]  
[微信小程序微商城（八）：缓存实现商品购物车功能][Link 2]  
[微信小程序微商城（九）：微信授权并实现个人中心页面页面][Link 3]  
[微信小程序微商城（十）：用户收货地址管理][Link 4]

#### 更多精彩内容可以关注“IT实战联盟”公*众*号哦~~~ ####

[.gif]: /images/20220216/6686d17f8f4348abbf60fd5fadc16abc.png
[1240]: /images/20220216/18b5743b22be40cea860d83d1d8af1e0.png
[1240 1]: /images/20220216/dcfdd386f7f245639240756c936ff059.png
[key]: https://www.jianshu.com/p/6f38ffb72dcd
[https]: https://www.jianshu.com/p/14722c41fdee
[Link 1]: https://www.jianshu.com/p/da176c8babeb
[API]: https://www.jianshu.com/p/6b18c33d5ee2
[API 1]: https://www.jianshu.com/p/99895481a11e
[API 2]: https://www.jianshu.com/p/9ea3b5dbc160
[API 3]: https://www.jianshu.com/p/6e291855ff78
[Link 2]: https://www.jianshu.com/p/b01e76034e07
[Link 3]: https://www.jianshu.com/p/944075e083d6
[Link 4]: https://www.jianshu.com/p/cb27a10461d3