技術標籤：經驗分享經驗記錄css3html

1.效果圖

2.wxml檔案

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

3.wxxs樣式檔案

/*主容器*/  
.stepper {  
  display:flex;
  width: 180rpx;  
  height: 60rpx;  
  /*給主容器設一個邊框*/  
  border
 
: 1px solid #ccc;  
  border-radius: 30rpx;  
}  

/*加號和減號*/  
.stepper text {  
  width: 50rpx;  
  line-height:60rpx;  
  text-align: center;  
}  

/*數值*/  
.stepper .input {  
  width: 80rpx;  
  height: 60rpx;  
  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;  
}  

4.js檔案

Component({
  /**
   * 元件的屬性列表
   */
  properties: {
      text:{
          type:String,
          value:''
      }

  },

  /**
   * 元件的初始資料
   */
  data: {
    // input預設是1  
    num: 1,  
    // 使用data資料物件設定樣式名  
    minusStatus: 'disabled'  
  },

  /**
   * 元件的方法列表
   */
  methods: {
     /* 點選減號 */  
  bindMinus: function() {  
    var num = this.data.num;  
    // 如果大於1時，才可以減  
    if (num > 1) {  
        num --;  
    }  
    // 只有大於一件的時候，才能normal狀態，否則disable狀態  
    var minusStatus = num <= 1 ? 'disabled' : 'normal';  
      // 將數值傳給父元件
    this.triggerEvent("itemChange",{num})
     // 將數值與狀態寫回
    this.setData({  
        num: num,  
        minusStatus: minusStatus  
    });  
},  
/* 點選加號 */  
bindPlus: function() {  
    var num = this.data.num;  
    // 不作過多考慮自增1  
    num ++;  
    // 只有大於一件的時候，才能normal狀態，否則disable狀態  
    var minusStatus = num < 1 ? 'disabled' : 'normal';  
    // 將數值與狀態寫回  
    this.triggerEvent("itemChange",{num})
    this.setData({  
        num: num,  
        minusStatus: minusStatus  
    });  
},  
/* 輸入框事件 */  
bindManual: function(e) {  
    var num = e.detail.value;  
    // 將數值與狀態寫回  
    this.setData({  
        num: num  
    });  
}  
  }
})