微信小程序--wxss中变量的使用

前言

Hello！小伙伴！
首先非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
哈哈 自我介绍一下
昵称：海轰
标签：程序猿一只｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！
日常分享：微信公众号【海轰Pro】记录生活、学习点滴，分享一些源代码或者学习资料，欢迎关注～

场景模拟 - 1

有时在某一个页面需要频繁地使用一个颜色

比如颜色：#f07c82

如果每次输入

那么工作量也是非常大的（记不住啊）

这时候我们可以使用一个全局变量，初值为 #f07c82

那么需要使用的时候，我们就可以直接使用这个变量名就可以了

Demo

wxml

<view class="box"></view>

wxss

/*定义全局变量color*/
page{
  --color--:#f07c82
}
.box{
  width: 200px;
  height: 200px;
  /*使用全局变量color*/
  background-color: var(--color--);
}

效果图如下

场景模拟 - 2

如果我们需要在js中操作wxss中的某一个属性呢？

比如通过点击按钮

实现背景颜色的变化

Demo

wxml

<button bindtap="changeColor">按钮</button>
<view class="box" style="--color--:{{color}}"></view>

wxss

.box{
  width: 200px;
  height: 200px;
  background-color:var(--color--);
}

js

Page({
  data: {
    color:"#f07c82"
  },
  changeColor:function(){
    this.setData({
      color:"#5a1216"
    })
  }
})

未点击按钮前

点击按钮后

当然这里也可以写成​​<view class="box" style="background-color:{{color}}"></view>​​

实现的效果是一样的

但如果我们需要通过点击，实现非常多标签颜色的变化，还是使用变量比较好

结语

文章仅作为学习笔记，记录从0到1的一个过程。希望对您有所帮助，如有错误欢迎小伙伴指正～

我是海轰ଘ(੭ˊᵕˋ)੭

谢谢支持❤️