小程序使用css变量,小程序使用css变量实现“换肤”方案

使用sass,stylus可以很方便的使用变量来做样式设计，其实css也同样可以定义变量，在小程序中由于原生不支持动态css语法，so，可以使用css变量来使用开发工作变简单。

基础用法

page {

--main-bg-color: brown;

}

.one {

color: white;

background-color: var(--main-bg-color);

margin: 10px;

}

.two {

color: white;

background-color: black;

margin: 10px;

}

.three {

color: white;

background-color: var(--main-bg-color);

}

提升用法

.two { --test: 10px; }

.three { --test: 2em; }

在这个例子中，var(--test)的结果是：

class="two" 对应的节点: 10px

class="three" 对应的节点: element: 2em

class="four" 对应的节点: 10px (继承自父级.two)

class="one" 对应的节点: 无效值, 即此属性值为未被自定义css变量覆盖的默认值

上述是一些基本概念，大致说明css变量的使用方法，注意在web开发中，我们使用:root来设置顶层变量，更多详细说明参考MDN的文档

妙用css变量

开发中经常遇到的问题是，css的数据是写死的，不能够和js变量直通，即有些数据使用动态变化的，但css用不了。对了，可以使用css变量试试呀

js// 在js中设置css变量

let myStyle = `

--bg-color:red;

--border-radius:50%;

--wid:200px;

--hgt:200px;`

let chageStyle = `

--bg-color:red;

--border-radius:50%;

--wid:300px;

--hgt:300px;`

Page({

data: {

viewData: {

style: myStyle

}

onLoad(){

setTimeout(() => {

this.setData({'viewData.style': chageStyle})

}, 2000);

}

})

wxml

wxss/* 使用var */

.my-view{

width: var(--wid);

height: var(--hgt);

border-radius: var(--border-radius);

padding: 10px;

box-sizing: border-box;

background-color: var(--bg-color);

transition: all 0.3s ease-in;

}

.my-view image{

width: 100%;

height: 100%;

border-radius: var(--border-radius);

}

通过css变量就可以动态设置css的属性值

作者：天天修改

小程序使用css变量,小程序使用css变量实现“换肤”方案相关推荐

为微信小程序增加换肤功能
起源之前,我做了一个展示类的微信小程序,本来都快要完结的了,可是突然,我才听说还要给小程序增加一个换肤功能,这个换肤功能可不是简单的写两套不同的样式表就行了,因为他要可以在后台动态替换背景,底图,文 ...
Android应用程序换肤实现系列（一）
转载请标明出处:http://blog.csdn.net/EdisonChang/article/details/50021467 国内已经有很多android应用软件支持个性化皮肤定制功能,比如QQ ...
微信小程序开发笔记二（WXSS和CSS样式美化）
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
用css给小程序画个简单写轮眼
用css给小程序画个简单写轮眼最终的效果初衷动画分解最终的效果初衷之前看到过一个h5的迷幻动画,正好今天有时间,把这个也简单画了一下. 动画分解重复创建几个View,每个View为之前9 ...
微信小程序开发教程5：设置全局css样式
平凡也就两个字: 懒和惰; 成功也就两个字: 苦和勤; 优秀也就两个字: 你和我. 跟着我从0学习JAVA.spring全家桶和linux运维等知识,带你从懵懂少年走向人生巅峰,迎娶白富美! 关注微信 ...
小甲鱼 OllyDbg 教程系列 (十三) ：把代码和变量注入程序以及硬件断点
小甲鱼 OllyDbg 视频教程:https://www.bilibili.com/video/av6889190?p=21 程序下载地址:https://pan.baidu.com/s/1A4-BD ...
weui开发文档_58小程序云 | 一站式跨平台小程序开发解决方案
引言目前,小程序风头正劲,微信.百度.阿里.头条等厂商都纷纷推出了自家的小程序. 众多的小程序平台对于各业务而言,又多了很多的流量入口,可以覆盖更多的用户,但也引入了新的问题:开发.维护成本陡增. ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序----第二天（小程序 - 模板与配置）
一.WXML 模板语法 WXML 模板语法 - 数据绑定 1. 数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据 2. 在 data 中定义页面的数据在页面对应的 .js 文件 ...

小程序使用css变量,小程序使用css变量实现“换肤”方案

小程序使用css变量,小程序使用css变量实现“换肤”方案相关推荐

最新文章

热门文章