uni-app 打包为小程序时动态修改的css变量无效
uni-app 打包为小程序时动态修改的css变量无效 产品分类:uniapp/小程序/微信
| 字段 | 值 |
|---|---|
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | win11 22000.434 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.3.10 |
| 第三方开发者工具版本号 | 1.05.2111300 |
| 基础库版本号 | 2.21.4 |
| 项目创建方式 | HBuilderX |
操作步骤:
无
预期结果:
按动态赋值的角度为起始旋转角度
实际结果:
从0开始
bug描述:
1、在style 中定义css 变量及需要用到的样式
/*定义全局变量*/
.dial-area{
--hourAngleFrom:0deg;
--hourAngleTo:0deg;
--minuteAngleFrom:0deg;
--minuteAngleTo:0deg;
}
.hour-hand{
width: 4upx;
height: 36%;
position: absolute;
left: 50%;
top: 14%;
margin-left: -2upx;
background: #000;
transform: rotate(var(--hourAngleFrom));
transform-origin:center bottom;
animation: hour 43200s linear infinite;
}
.minute-hand{
width: 2upx;
height: 46%;
position: absolute;
left: 50%;
top: 4%;
margin-left: -1upx;
background: #000;
transform: rotate(var(--minuteAngleFrom));
transform-origin:center bottom;
animation: minute 3600s linear infinite;
}
@keyframes hour
{
from {transform:rotate(var(--hourAngleFrom));}
to {transform:rotate(var(--hourAngleTo));}
}
@keyframes minute
{
from {transform:rotate(var(--minuteAngleFrom));}
to {transform:rotate(var(--minuteAngleTo));}
}
2、动态修改css变量的值
<view class="dial-area" :style="'--hourAngleFrom:'+hourAngle+'deg;--hourAngleTo:'+(hourAngle+360)+'deg;--minuteAngleFrom:'+minuteAngle+'deg;--minuteAngleTo:'+(minuteAngle+360)+'deg;'">
更多关于uni-app 打包为小程序时动态修改的css变量无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

