简介

这是一个用微信小程序原生代码实现的数量加减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实现商品分类
微信小程序微商城（八）：缓存实现商品购物车功能
微信小程序微商城（九）：微信授权并实现个人中心页面页面
微信小程序微商城（十）：用户收货地址管理

---------------END----------------

后续的内容同样精彩

长按关注“IT实战联盟”哦

注意：本文归作者所有，未经作者允许，不得转载