微信小程序-购物车数字加减

1.效果图

2.wxml文件

<!-- 主容器 -->
<view class="stepper">  <!-- 减号 -->  <text class="{{minusStatus}}" bindtap="bindMinus">-</text>  <!-- 数值 -->  <input class="input" type="number" bindchange="bindManual" value="{{num}}" />  <!-- 加号 -->  <text class="normal" bindtap="bindPlus">+</text>
</view>

3.wxxs样式文件

/*主容器*/
.stepper {  display:flex;width: 180rpx;  height: 60rpx;  /*给主容器设一个边框*/  border: 1px solid #ccc;  border-radius: 30rpx;
}  /*加号和减号*/
.stepper text {  width: 50rpx;  line-height:60rpx;  text-align: center;
}  /*数值*/
.stepper .input {  width: 80rpx;  height: 60rpx;  text-align: center;  font-size: 12px;  /*给中间的input设置左右边框即可*/  border-left: 1px solid #ccc;  border-right: 1px solid #ccc;
}  /*普通样式*/
.stepper .normal{  color: black;
}  /*禁用样式*/
.stepper .disabled{  color: #ccc;
}

4.js文件

Component({/*** 组件的属性列表*/properties: {text:{type:String,value:''}},/*** 组件的初始数据*/data: {// input默认是1  num: 1,  // 使用data数据对象设置样式名  minusStatus: 'disabled'  },/*** 组件的方法列表*/methods: {/* 点击减号 */  bindMinus: function() {  var num = this.data.num;  // 如果大于1时，才可以减  if (num > 1) {  num --;  }  // 只有大于一件的时候，才能normal状态，否则disable状态  var minusStatus = num <= 1 ? 'disabled' : 'normal';  // 将数值传给父组件this.triggerEvent("itemChange",{num})// 将数值与状态写回this.setData({  num: num,  minusStatus: minusStatus  });
},
/* 点击加号 */
bindPlus: function() {  var num = this.data.num;  // 不作过多考虑自增1  num ++;  // 只有大于一件的时候，才能normal状态，否则disable状态  var minusStatus = num < 1 ? 'disabled' : 'normal';  // 将数值与状态写回  this.triggerEvent("itemChange",{num})this.setData({  num: num,  minusStatus: minusStatus  });
},
/* 输入框事件 */
bindManual: function(e) {  var num = e.detail.value;  // 将数值与状态写回  this.setData({  num: num  });
}  }
})

微信小程序-购物车数字加减相关推荐

微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
小程序购物车[实现加减计算金额以及数量]
<view class="content_box" wx:for="{{arr}}" wx:key="{{k ...
微信小程序购物车弹出层
https://www.jianshu.com/p/a0c2c8712dab 微信小程序购物车数量加减功能 wxml:  <button bin ...
微信小程序全选，微信小程序checkbox，微信小程序购物车
微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选设计思路: 一.从网络上传入以下Json数据格式的数组 1.标题titl ...
微信小程序购物车功能
微信小程序购物车效果购物车是一个比较简单的小功能~ 购物车功能主要运用了微信小程序的缓存机制,在商品页面将需要添加的数据同步传入缓存中,然后在购物页面通过同步方法拿到对应的数据,最后在页面上进行渲染 ...
微信小程序购物车请求服务器数据,微信小程序购物车案例
最近呢,我看到有人在问微信小程序的购物车怎么写,我呢就在这里写一写: 购物车主要的就是全选的判断.勾选单个物品判断是否全选.计算总价效果Gif图: 直接简单粗暴的上代码: wxml代码: 全选 {{ ...
原生微信小程序购物车
原生微信小程序购物车!! 效果: html: <view style="background-color: #eeeeee;height: 100vh;"><vi ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序之下拉加载和上拉刷新
微信小程序之下拉加载和上拉刷新微信小程序下拉加载和上拉刷新两种实现方法方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新首先要在json文件里 ...

微信小程序-购物车数字加减

微信小程序-购物车数字加减相关推荐

最新文章

热门文章