微信小程序 - 商城项目 - 高亮功能设置

选项卡功能

要实现一个点击切换高亮的功能

  <view class="changeBox">
    <view class="{{current==0?'active':''}}" bindtap="handleActive" data-current="0">商品详情</view>
    <view class="{{current==1?'active':''}}" bindtap="handleActive" data-current="1">用户评价</view>
  </view>

两个同时绑定上点击事件，且传入自定义属性作为区分值 0 和 1 ，样式添加赋予逻辑判断，判断其设置的阀门值分别是否为 0 或 1 

  // 点击切换选项卡高亮
  handleActive(e){
    this.setData({
      current:e.currentTarget.dataset.current
    })
  },

样式：

.changeBox .active {
  border-bottom: 3rpx solid red;
}

点击触发后，将传来的自定义属性值，将控制样式切换的阀门值修改为此，实现点击切换高亮逻辑