Brief introduction

This is a small program with a micro-channel native code implementation of the number of addition and subtraction demo, mainly for commodities cart or modify the number of product listings using very simple Oh ~ ~ ~.

Core js Method Description

addCount (increasing the number)
delCount (reducing the number)
getCount (get the number)

To achieve results as shown below:
.Gif achieve results

Implementation steps

1, page layout

count.wxml increase the master code and submit button container

<!-- 主容器 -->  
  <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, add a page style wcss

count.css
Setting global styles

page {  
    background: #EDEDED;
}

Set the main container style

/*主容器*/  
.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;  
}

Set button button style

button{
  width: 90%;
  color: white;
  background:#DFB741;
  margin:30px auto;  
}

3, write js data exchange

Digital initialized to 1

  /**
   * 页面的初始数据
   */
  data: {
    num:1
  },

addCount click on the "+" sign to increase the numbers

  /* 加数 */
  addCount: function (e) {
    console.log("刚刚您点击了加1");
    var num = this.data.num;
    // 总数量-1  
    if (num < 1000) {
      this.data.num++;
    }
    // 将数值与状态写回  
    this.setData({
      num: this.data.num
    });
  },

It delCount clicks on the "-" sign, reduce the number of

  /* 减数 */
  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 get the results set

  getCount: function (e) {
    var num = this.data.num;
    console.log(num);
    wx.showToast({
      title: "数量：" + num + "",
    })
  }

Well, demo test has been completed feel about it!
Follow us

Remark

Micro-channel micro-mall applet series data are acquired through https dynamic and present, it is recommended to start reading from the first chapter. We can support this series of articles will continue to update it, thank you! What suggestions can you put forward in the course, we study together ha ~ ~ ~

Small micro-channel micro-program series mall

Micro-channel small quantity of a commodity program implements subtraction Case