uni-app vue2 支付宝小程序动态 style 编译 bug

uni-app vue2 支付宝小程序动态 style 编译 bug

操作步骤：

  • 看bug描述

预期结果：

  • 正确的样式

实际结果：

  • 错误的

bug描述：

<view :style="style ? style : {color: 'green'}" style="background: red;">测试 style</view>

编译成了

<view style="{{'background:red;'+(style?style:{color:'green'})}}">测试 style</view>

图片

项目信息 信息
产品分类 uniapp/小程序/阿里
PC开发环境操作系统 Mac
HBuilderX类型 Alpha
HBuilderX版本号 4.81
项目创建方式 HBuilderX

更多关于uni-app vue2 支付宝小程序动态 style 编译 bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

感谢反馈，问题已复现，已加分。

更多关于uni-app vue2 支付宝小程序动态 style 编译 bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 编译问题，在支付宝小程序平台动态样式处理上存在缺陷。

问题分析：

  • 编译后的代码将静态样式 style="background: red;" 和动态样式 :style="style ? style : {color: 'green'}" 错误地拼接在一起
  • 正确的编译结果应该保持静态和动态样式的分离，或者正确处理样式合并

临时解决方案：

  1. 将静态样式改为动态绑定：
<view :style="[{background: 'red'}, style ? style : {color: 'green'}]">测试 style</view>
  1. 或者使用计算属性合并样式：
computed: {
  mergedStyle() {
    return {
      background: 'red',
      ...(this.style || {color: 'green'})
    }
  }
}
回到顶部