全屏网站宽度,域名服务器怎么设置,sem优化师,个人博客网站教程简介这是一个用微信小程序原生代码实现的数量加减demo#xff0c;主要是用于商品购物车或者商品详情修改数量使用#xff0c;很简单哦~~~。核心js方法说明addCount(增加数量)delCount (减少数量)getCount(获取数量)实现效果如下图所示#xff1a;微信小程序实现一个简单的商…简介这是一个用微信小程序原生代码实现的数量加减demo主要是用于商品购物车或者商品详情修改数量使用很简单哦~~~。核心js方法说明addCount(增加数量)delCount (减少数量)getCount(获取数量)实现效果如下图所示微信小程序实现一个简单的商品数量加减案例实现步骤1、页面布局count.wxml 增加主容器代码和提交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;// 总数量-1if (num 1000) {this.data.num;}// 将数值与状态写回this.setData({num: this.data.num});},delCount 点击“-”号减少数字/* 减数 */delCount: function (e) {console.log(刚刚您点击了减1);var num this.data.num;// 商品总数量-1if (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框架搭建并实现导航功能微信小程序微商城(二)电商首页轮播、分类导航和新品特卖实现小程序微商城(三)电商首页无限下拉刷新动态API数据实现微信小程序微商城(四)动态API实现商品详情页(上)微信小程序微商城(五)动态API实现商品详情页(下)微信小程序微商城(六)动态API实现新品特卖商品流式布局微信小程序微商城(七)动态API实现商品分类微信小程序微商城(八)缓存实现商品购物车功能微信小程序微商城(九)微信授权并实现个人中心页面页面微信小程序微商城(十)用户收货地址管备注微信小程序微商城系列 都是通过https 动态获取数据并展示的建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去谢谢各位大家在使用过程中有哪些建议可以提出来我们一起学习哈~~~微信小程序实现一个简单的商品数量加减案例微信小程序实现一个简单的商品数量加减案例
