微信小程序：商城购物车数量选择器

微信小程序：商城购物车数量选择器

本文简单的制作一下制作商城类小程序的时候我们经常会需要数字加减器。

运行截图

主要代码：

js:

Page({
  data: {
    Goods_Num:0,
  },
  onLoad: function (options) {
  },
  /*购物车数字加减器 */
  //数字加1
  addNum: function() {
    let num=this.data.Goods_Num
    num++
    this.setData({
      Goods_Num:num
    })
  },
  //数字减1
  minusNum: function() {
    let num=this.data.Goods_Num
    if(num>=1){
      num--
    }
    else{
      wx.showToast({
        title: '不能再减少了哟！',
        icon:'none',
        duration:1500
      })
    }
    this.setData({
      Goods_Num:num
    })
  }
})

wxml:

<view class="Add_Sub">
  <text class='Goods_Num'>{{Goods_Num}}</text>
  <view class="subtractor" bindtap='minusNum'>
    <image class="Add_Sub_logo" src="../images/Sub.png"></image><!--这里我使用的图片是为了适配不同的机型，文章最后会提供素材下载地址-->
  </view>
  <view class="adder" bindtap='addNum'>
    <image class="Add_Sub_logo" src="../images/Add.png"></image><!--这里我使用的图片是为了适配不同的机型，文章最后会提供素材下载地址-->
  </view>
</view>

wxss:

/**数字加减器详细样式表**/
.Add_Sub{
  position:absolute;
  width:160rpx;
  left:150px;
  height:60rpx;
  top:20%;
}
.Goods_Num{
  position: absolute;
  top:0rpx;
  left:45rpx;
  width:70rpx;
  height: 50rpx;
  text-align: center;
  font-size: 20px;
}
.subtractor{
  position: absolute;
  top:10%;
  left:0%;
  width:45rpx;
  height: 45rpx;
  border-radius: 50px;
  color:#999997;
  z-index: 99999;
}
.adder{
  position: absolute;
  top:10%;
  right:0%;
  width:45rpx;
  height: 45rpx;
  color:#fff;
  border-radius: 50px;
  z-index: 99999;
}
.Add_Sub_logo{
  position:absolute;
  height:100%;
  width:100%;
  top:0%;
  left:0%;
}

Iconfont-阿里巴巴矢量图标库：

https://www.iconfont.cn/