3、微信小程序学习:加减控件
2018-01-10 11:09
399 查看
<!--index.wxml--> <view class='stepper'> <text class='{{minusStatus}}' type='number' bindtap='bindMinus'>-</text> <input bindinput='bindManual' value='{{num}}'></input> <text bindtap='bindPlus'>+</text> </view>
/**index.wxss**/ /*全局样式*/ page { padding: 20px 0; } /*主容器*/ .stepper { width:80px; height:26px; margin: 0 auto; border: 1px solid #ccc; border-radius: 3px; } /*加号和减号*/ .stepper text { float: left; width: 19px; line-height: 26px; text-align: center; } /*数值*/ .stepper input { width: 40px; height: 26px; float: left; margin: 0 auto; text-align: center; font-size: 12px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } /*普通样式*/ .stepper .normal { color:black; } /*禁用样式*/ .stepper .disable { color: #ccc; }
//index.js //获取应用实例 const app = getApp() Page({ data: { num:1, minusStatus:'disable' }, //事件处理函数 /*点击减号*/ bindMinus: function() { var num = this.data.num; if (num>1) { num--; } var minusStatus = num>1 ? 'normal':'disable'; this.setData({ num:num, minusStatus:minusStatus }) }, /*点击加号*/ bindPlus: function() { var num = this.data.num; num++; var minusStatus = num > 1 ? 'normal' : 'disable'; this.setData({ num:num, minusStatus: minusStatus }) }, /*输入框事件*/ bindManual: function(e) { var num = e.detail.value; var minusStatus = num > 1 ? 'normal' : 'disable'; this.setData({ num:num, minusStatus: minusStatus }) } })
效果图:
相关文章推荐
- 1、微信小程序学习:基本控件的使用
- 微信小程序学习(11)-checkbox控件和label标签
- 微信小程序入门学习
- EA&UML日拱一卒-0基础学习微信小程序(4)- 安装开发工具
- 微信小程序-UI控件的使用(3)
- 学习笔记_微信小程序开发--常用快捷键
- 微信小程序学习笔记(二)- 小程序中的canvas
- 微信:小程序学习笔记(1)
- 【微信小程序】button按钮控件的演示
- 微信小程序LXStepper组件-商品数量加减
- 微信小程序学习笔记1——开发环境搭建
- 微信小程序入门学习-- 简易Demo:计算器
- 微信小程序学习笔记(十一)form
- 微信小程序-学习用
- 微信小程序学习笔记(十八)audio音频
- 微信小程序学习笔记
- 微信小程序学习wx.request 中 post 出现500错误的一些成因
- 微信小程序学习指南
- 微信小程序学习笔记——模板和模块化
- 微信小程序学习一初探“小程序”