1***@qq.com
1***@qq.com
  • 发布:2022-01-25 17:09
  • 更新:2022-01-25 17:09
  • 阅读:848

【报Bug】打包为小程序,动态修改的css变量无效

分类:uni-app

产品分类: 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;'">  

代码就是这样,打包为h5可以正常运行,旋转角度为修改css变量后的角度,而小程序始终是从0开始。在微信开发者工具中调试手动改变样式,恢复正常,像是视图没有更新

2022-01-25 17:09 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复