• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

【小程序开发】购物车加减几件demo

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

 js: 

Page({
  data: {
    // input默认是1
    num: 1,
    // 使用data数据对象设置样式名
    minusStatus: 'disabled'
  },
  /* 点击减号 */
  bindMinus: function () {
    var num = this.data.num;
    // 如果大于1时,才可以减
    if (num > 1) {
      num--;
    }
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 将数值与状态写回
    this.setData({
      num: num,
      minusStatus: minusStatus
    });
  },
  /* 点击加号 */
  bindPlus: function () {
    var num = this.data.num;
    // 不作过多考虑自增1
    num++;
    // 只有大于一件的时候,才能normal状态,否则disable状态
    var minusStatus = num < 1 ? 'disabled' : 'normal';
    // 将数值与状态写回
    this.setData({
      num: num,
      minusStatus: minusStatus
    });
  },
  /* 输入框事件 */
  bindManual: function (e) {
    var num = e.detail.value;
    // 将数值与状态写回
    this.setData({
      num: num
    });
  }
})

 css: 

/*全局样式*/
page {
	padding: 20px 0;
}

/*主容器*/
.stepper {
	width: 80px;
	height: 26px;
	/*给主容器设一个边框*/
	border: 1px solid #ccc;
	border-radius: 3px;
	margin:0 auto;
}

/*加号和减号*/
.stepper text {
	width: 19px;
	line-height: 26px;
	text-align: center;
	float: left;
}

/*数值*/
.stepper input {
	width: 40px;
	height: 26px;
	float: left;
	margin: 0 auto;
	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;
}

 

效果图:

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序页面的生命周期 - 初解发布时间:2022-07-18
下一篇:
试了微信小程序原生和mpvue后,我最后选择了wepy发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap