前言
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的一个过程。希望对您有所帮助,如有错误欢迎小伙伴指正~
我是海轰ଘ(੭ˊᵕˋ)੭,如果您觉得写得可以的话,请点个赞吧
写作不易 「点赞」+「收藏」+「转发」
谢谢支持❤️