小程序中使用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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
JQuery 1.4 中的Ajax问题
Jan 23 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
javascript常用方法总结
May 14 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
微信小程序之拖拽排序(代码分享)
Jan 21 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
js中apply和call的理解与使用方法
Nov 27 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(7) php 字符串相关应用
2010/03/05 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
yii去掉必填项中星号的方法
2015/12/28 PHP
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
node.js实现的装饰者模式示例
2017/09/06 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
详解Python的三种可变参数
2019/05/08 Python
python 进程的几种创建方式详解
2019/08/29 Python
Python2与Python3的区别点整理
2019/12/12 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
python中append函数用法讲解
2020/12/11 Python
CSS3混合模式mix-blend-mode/background-blend-mode简介
2018/03/15 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
车间操作工岗位职责
2013/12/19 职场文书
市政管理求职信范文
2014/05/07 职场文书
微笑服务演讲稿
2014/05/13 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
Golang中异常处理机制详解
2021/06/08 Golang
mybatis 解决从列名到属性名的自动映射失败问题
2021/06/30 Java/Android
python代码实现扫码关注公众号登录的实战
2021/11/01 Python