小程序实现商品数量加减

又来啦~~~~~
效果页面:

image
<!--pages/home/home.wxml-->
<view class="jisuan">
  <view bindtap="minus" class="tab jian">-</view>
  <view>{{count}}</view>
  <view bindtap="add" class="tab jia">+</view>
</view>
/* pages/home/home.wxss */
.jisuan{
  width: 150rpx;
  height: 50rpx;
  display: flex;
  justify-content: space-between;
  border: 2rpx solid #eee;
  margin: 100rpx 250rpx;
}
.jisuan view:nth-child(2){
  flex: 1;
  text-align: center;
}
.jisuan .tab.jia{
  text-align: center;
  width: 50rpx;
  background: skyblue;
  border-radius: 50%;
}
.jisuan .tab.jian{
   text-align: center;
   width: 50rpx;
  border:  2rpx solid skyblue;
   border-radius: 50%;
}

// pages/home/home.js
Page({
  minus(){
    if (--this.data.count<0) this.data.count = 0
    this.setData({
      count: this.data.count
    })
  },
  add() {
    if (++this.data.count>10) this.data.count = 10
    this.setData({
      count: this.data.count
    })
  },
  
  /**
   * 页面的初始数据
   */
  data: {
    count:0
    
  }
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容