微信小程序加减控件

最新推荐文章于 2024-05-09 22:42:28 发布

iCrazyTimor

最新推荐文章于 2024-05-09 22:42:28 发布

阅读量4.8k

点赞数

分类专栏： wx小程序文章标签： wx加减控件

本文链接：https://blog.csdn.net/iCrazyTimor/article/details/95170128

版权

微信小程序加减控件

<!--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: