小程序中使用css var变量(使js可以动态设置css样式属性)


Posted in Javascript onMarch 31, 2020

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

基本用法

基础用法

<!--web开发中顶层变量的key名是:root,小程序使用page-->
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);
}

提升用法

<div class="one">
 <div class="two">
  <div class="three">
  </div>
  <div class="four">
  </div>
 <div>
</div>
.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

<!--将css变量(js中设置的那些)赋值给style-->
<view class="container">
 <view class="my-view" style="{{viewData.style}}">
  <image src="/images/abc.png" mode="widthFix"/>
 </view>
</view>

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的属性值

代码片段

https://developers.weixin.qq.com/s/aWfUGCmG7Efe

github

小程序演示

小程序中使用css var变量(使js可以动态设置css样式属性)

到此这篇关于小程序中使用css var变量的文章就介绍到这了,更多相关小程序使用css var变量内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
Javascript三种字符串连接方式及性能比较
May 28 Javascript
功能完善的小程序日历组件的实现
Mar 31 #Javascript
小程序双头slider选择器的实现示例
Mar 31 #Javascript
JavaScript实现电灯开关小案例
Mar 30 #Javascript
javascript实现计算器功能
Mar 30 #Javascript
详解Webpack抽离第三方类库以及common解决方案
Mar 30 #Javascript
记一次react前端项目打包优化的方法
Mar 30 #Javascript
12 种使用Vue 的最佳做法
Mar 30 #Javascript
You might like
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
PHP登陆后跳转到登陆前页面实现思路及代码
2014/01/17 PHP
php的zip解压缩类pclzip使用示例
2014/03/14 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
javascript基本数据类型及类型检测常用方法小结
2016/12/14 Javascript
详解Vue2.0里过滤器容易踩到的坑
2017/06/01 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
vue实现全屏滚动效果(非fullpage.js)
2020/03/07 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Anaconda入门使用总结
2018/04/05 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
python 装饰器的基本使用
2021/01/13 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
大三毕业自我鉴定
2014/01/15 职场文书
初三物理教学反思
2014/01/21 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
自我评价优缺点范文
2015/03/11 职场文书