评论

微信小程序动态绑定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
收藏
评论

9 个评论

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

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

    2023-03-09
    赞同 3
    回复 1
    • 我的我是我
      我的我是我
      2023-09-12
      目前我用这种方法,无效,请问楼主现在有解决的方法吗?
      2023-09-12
      回复
  • 马特:啊对对对
    马特:啊对对对
    05-17

    computed:{

    some_style() {

    return `color: blue; font-size:20px; background:red;`

    },



    }

    05-17
    赞同
    回复
  • 忘忧草
    忘忧草
    05-06

    <view style="{{setColor(thead,item)}};">{{item[thead['key']]|| ''}}</view>

      methods: {
        setColor(thead, item) {
          console.log(thead, item);
          return "color:red";
        },
    
    05-06
    赞同
    回复 1
    • 忘忧草
      忘忧草
      05-06
      内联里面引入方法 这样的写法不支持嘛
      05-06
      回复
  • 冰俏
    冰俏
    2022-11-23

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

    2022-11-23
    赞同
    回复 1
    • 冰俏
      冰俏
      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
      回复
    • 冰俏
      冰俏
      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
      回复
登录 后发表内容