在微信小程序中如何让减号减到零时变暗

当你点击减号，减到零时，减号会变暗，或者点不动，（减号是一个图片）

判断数量为0时增加一个gray滤镜变灰，当然后台js逻辑也需要改过，为0后return退出后续的减操作，增加变灰滤镜并不能阻止点击
简单示例如下

demo.wxss

.gray{
  filter:grayscale(100%)
}
.item{display: flex;justify-content: center;margin-bottom:50px}
.item input,.item .num{width:30px;height:30px;line-height:30px;text-align:center;user-select: none;}
.item .btn{background: green;border-radius: 50%;}

demo.js

Page({
  data:{
    pros:[{name:'包子',num:0},{name:'油条',num:0}]
  },
  opr: function (e) {
    var ds=e.currentTarget.dataset;
    var item=this.data.pros[ds.index];
    if(ds.op=='-'&&item.num==0)return;//减操作，数量为0退出
    if(ds.op=='-')item.num--;
    else item.num++;
    console.log(this.data.pros)
    this.setData({pros:this.data.pros})
  }
})

demo.wxml

<view wx:for="{{pros}}" class="item">
<view>{{item.name}}</view>
<input type="button" class="btn{{item.num==0?' gray':''}}" value="-" bindtap="opr" data-op="-" data-index="{{index}}"/>
<view class="num">{{item.num}}</view>
<input type="button" class="btn" value="+" bindtap="opr" data-op="+" data-index="{{index}}"/>
</view>
<view wx:for="{{pros}}" >
<view>{{item.name}}的数量为：{{item.num}}</view>
</view>

有其他问题可以继续交流~

在找一个灰色的减号按钮。等减到0的时候替换原来的蓝色减号，就好了。灰色按钮不绑定事件。蓝色按钮绑定事件。

设置 禁用 disabled 呗 。等于0时 为 true