小程序wxss;css中使用变量_软件运维

我们在写样式的时候，可能一个app内的颜色，比如#00ff00，假设这个颜色我用了100次，穿插写在不同的页面里。当需要修改这个主题的时候，会让人抓狂。

所以我们可以使用变量来优化。

在html, css里面，它原始的定义方式及使用方法是这样的

其中，:root是根元素选择器，也就是<html>元素。在这里面定义的变量，可以在整个页面进行使用。

使用的时候，用var()函数进行调用。

注意：约定变量名须以两个连字符'--'开头

在小程序中，用法基本也是一样的：

我们在wxss页面中进行定义

注意，page选择器是选中整个页面，前面是没有'.'号的。这是wxss系统自带的选择器。可以看到，用法和css原始用法差别不大。

你也可以在wxml里面直接使用！

这个wxss变量，既可以在每个页面mypage.wxss里面的page里声明，

，就能在所有页面里使用。

1、把要改变样式添加到相应js文件的全局变量中。

2、将变量绑定到view中。

3、在view中添加事件。

4、在相应js文件中添加该自定义方法changeColor， function，e，this.setData，color ， #fff。

1/微信小程序有个属性hover-class='active'，是指当点击列表元素时当按下鼠标左键会显示active样式，但鼠标离开样式就会复原，可以参考以下解决方案，直接上代码：

2/核心点:class=”taga-item {{dateCurrent==item.id?'active-tag':”}}”模板文件中使用三元运算符,通过dateCurrent指定当前item的id.

第一步，把要改变样式添加到相应js文件的全局变量中，如： data : { color : '#000' }

第二步，将变量绑定到view中,如：<view style="color:{{color}}">

第三步，在view中添加事件，如： bindtap="changeColor"

第四步，在相应js文件中添加该自定义方法：

, changeColor: function(e){

this.setData({ color : '#fff' })

}

欢迎分享，转载请注明来源：内存溢出

小程序wxss;css中使用变量