背景:写一个动效,需要先请求接口拿到数据,再根据数据计算高度,此时便想到了scss、less变量写法,但由于项目是css,那么在微信小程序css是否也可以像scss/less一样,支持变量写法呢?
答案肯定是可以的。
总结一下小程序css使用变量的用法:
1、css原始定义方式
首先在原生的html、css中是支持css变量的,在root节点里定义所需变量,便可以在整个页面使用,约定变量以--开头,调用的时候用var()函数。
用法如下:
<style>
:root {
--final-top: 40px;
}
.my-wapper{
top: var(--final-top);
}
</style>
在微信小程序中,使用原理相同,区别在于小程序的根结点是page选择器。
在wxss文件中定义并使用:(也可以在app.wxss中定义即可全局使用)
page {
--final-top: 40px;
}
.my-wapper {
top: var(--final-top);
}
也可以在wxml中使用:
<view style="top: (--final-top);">
可以直接在wxml里面使用wxss变量!
</view>
2、在js中定义
原生js是支持动态修改css的,小程序可不可以呢?文章来源:https://www.toymoban.com/news/detail-508925.html
因为我需要先拿到接口返回的数据再做处理,所以上述方法就行不通了,那我们直接在js文件中直接定义即可,需要用到setData,然后便可以在wxss文件中使用。例如:文章来源地址https://www.toymoban.com/news/detail-508925.html
this.setData({
style: `--point-final-height: ${130 * (19 - randomScore)}rpx;`
})
.point-box {
width: 328rpx;
height: 131rpx;
background: rgba(255, 254, 238, 0);
position: absolute;
top: 0;
animation: bounce_box 1.5s linear 1s forwards;
}
@keyframes bounce_box {
0% {
top: 0rpx;
}
100% {
top: var(--point-final-height);
}
}
到了这里,关于css变量用法(原生js、小程序)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!