评论

微信小程序动态绑定style样式

微信小程序动态绑定style样式

第一种,根据data的值判断显示什么颜色

// js文件
data:{
  selected:true
}
// wxml
<view class="tab-header">
   <view style="background:{{selected ? 'red' : 'blue'}}" >红色</view>
   <view style="background:{{selected ? 'blue' : 'red'}}" >蓝色</view>
</view>

第二种:绑定data的值,当需要修改颜色的时候直接在js文件里面setData({})改变color的值即可

// js文件
data:{
  color:"red",
  color1:"blue"
}
// wxml
<view class="tab-header">
   <view style="background:{{color}}" >红色</view>
   <view style="background:{{color1}}" >蓝色</view>
</view>
最后一次编辑于  2021-07-16  
点赞 4
收藏
评论

7 个评论

  • Mr.Z
    Mr.Z
    2023-03-09

    现在这种方式已经无效了吗?

    2023-03-09
    赞同 3
    回复 1
    • 我的我是我
      我的我是我
      2023-09-12
      目前我用这种方法,无效,请问楼主现在有解决的方法吗?
      2023-09-12
      回复
  • 自然呆到可爱*^o^*
    自然呆到可爱*^o^*
    2022-11-23

    background-image: {{linear-gradient(to right,item.leftColor, item.rightColor )}} 这个怎么解决

    2022-11-23
    赞同
    回复 1
    • 自然呆到可爱*^o^*
      自然呆到可爱*^o^*
      2022-11-23
      已解决   background-image: linear-gradient(to right,{{item.leftColor}}, {{item.rightColor}});
      2022-11-23
      回复
  • 好多鱼真的好多鱼🐠
    好多鱼真的好多鱼🐠
    2022-05-05

    报错“{ expected css(css-lcurlyexpected)“ 的错误,怎么解决?


    2022-05-05
    赞同
    回复
  • 木铉子⁶⁴
    木铉子⁶⁴
    2021-11-22

    .json中style的属性没有明确说明啊

    2021-11-22
    赞同
    回复
  • Vi Roser
    Vi Roser
    2021-07-16

    style="background:linear-gradient(90deg, {{colorList[index][0]|| '#E85B60'}}, {{colorList[index][1]|| '#E74C7C'}})"


    2021-07-16
    赞同
    回复 2
    • 昂予
      昂予
      2022-05-20
      语法错呢?
      2022-05-20
      回复
    • 自然呆到可爱*^o^*
      自然呆到可爱*^o^*
      2022-11-23
      大哥!解决没有?
      2022-11-23
      回复
  • admin
    admin
    2021-03-22
    {{homeOutObj.color}}绑定的啥
    
    2021-03-22
    赞同
    回复 1
  • ㅤ国民校草ㅤ
    ㅤ国民校草ㅤ
    2021-03-22

    ????

    2021-03-22
    赞同
    回复 1
    • 波吉
      波吉
      2021-03-23
      看不明白吗,哈哈,看楼上的解释
      2021-03-23
      回复
登录 后发表内容