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

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

作者: 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