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

回到顶部