微信小程序学习：加减控件

微信小程序学习：加减控件
<!--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;
}

微信小程序效果图：