小程序中使用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 12 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
May 26 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JS简单设置下拉选择框默认值的方法
Aug 20 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
详解webpack 最简打包结果分析
Feb 20 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过滤html字符串,防止SQL注入的方法
2013/07/02 PHP
php使用strtotime和date函数判断日期是否有效代码分享
2013/12/25 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
javascript 模拟点击广告
2010/01/02 Javascript
jQuery的实现原理的模拟代码 -5 Ajax
2010/08/07 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
nodejs实现邮件发送服务实例分享
2017/03/29 NodeJs
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
基于JS实现带动画效果的流程进度条
2018/06/01 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
JS实现多选框的操作
2020/06/24 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python logging模块学习笔记
2014/05/24 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
python实现的文件同步服务器实例
2015/06/02 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python写入文件自动换行问题的方法
2019/07/05 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
python检测服务器端口代码实例
2019/08/31 Python
html5的localstorage详解
2017/05/09 HTML / CSS
宣传部部长竞选演讲稿
2014/04/26 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
客房领班岗位职责
2015/02/11 职场文书
Python制作表白爱心合集
2022/01/22 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技