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