美文网首页
微信小程序 - 按钮点击切换颜色踩坑

微信小程序 - 按钮点击切换颜色踩坑

作者: coderfl | 来源:发表于2020-03-24 22:29 被阅读0次
  • 微信小程序触发colorClick点击事件后,colorIndex已经触发更新了,但是wxml中三目运算的结果不会显示到调试器的元素上(假如这块三目运算的是输出class名,在调试器Wxml中看不到这个class名,但是class下的样式能正常展示)
      <view>
        <van-button
          wx:for="{{info.color}}"
          wx:key="index"
          class="sel-btn"
          custom-style="{{index === colorIndex ? actStyle : ''}}"
          type="default"
          size="small"
          bind:tap="colorClick"
          data-index="{{index}}">
          {{item.col}}
        </van-button>
      </view>

// js文件
  data: {
    colorIndex:null,
    actStyle: 'color: #ed4566;border-color: #ed4566;'
  },
  methods: {
    colorClick(e){
      this.setData({colorIndex:e.currentTarget.dataset.index});
    }
  }

相关文章

网友评论

      本文标题:微信小程序 - 按钮点击切换颜色踩坑

      本文链接:https://www.haomeiwen.com/subject/kqfzyhtx.html