小程序中使用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 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JavaScript 事件属性绑定带参数的函数
Mar 13 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
详解Vue取消eslint语法限制
Aug 04 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
2013/11/21 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
javascript实现微信分享
2014/12/23 Javascript
基于JavaScript实现生成名片、链接等二维码
2015/09/20 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
详解Vue之计算属性
2020/06/20 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
使用python实现对元素的长截图功能
2019/11/14 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
媒体宣传策划方案
2014/05/25 职场文书
英语教师自荐信
2014/05/26 职场文书
安全宣传标语口号
2014/06/06 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
设备收款委托书范本
2014/10/02 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python