uni-app 绑定style动态修改scaleY无效，scale没问题

uni-app 绑定style动态修改scaleY无效，scale没问题

项目信息 详情
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win7
HBuilderX类型 正式
HBuilderX版本 3.2.3
手机系统 全部
手机机型 iphone 7 plus
页面类型 vue
打包方式 离线
项目创建方式 HBuilderX

测试过的手机

  • iphone 7 plus
  • vivo y52s

示例代码

绑定style，动态修改scaleY无效，scale没问题
<image mode="aspectFill" :style="{scaleY:scaleY}" src="/static/image/touxiang.jpg"></image>

...
data() {
  return {
    scaleY:1.5
  }
},
...

操作步骤

  • 无

预期结果

  • 无

实际结果

  • 无

bug描述

绑定style，动态修改scaleY无效，scale没问题


更多关于uni-app 绑定style动态修改scaleY无效，scale没问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 绑定style动态修改scaleY无效，scale没问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中，scaleY 作为单独的 CSS 属性在某些平台可能不被支持，尤其是 App 端。uni-app 的样式绑定最终会转换为各平台原生渲染，而部分平台对独立的 scaleY 属性支持不完整。

解决方案：

  1. 使用 transform 替代
    将 scaleY 放在 transform 中即可正常生效：

    <image 
    mode="aspectFill" 
    :style="{ transform: `scaleY(${scaleY})` }" 
    src="/static/image/touxiang.jpg"
></image>

  2. 若需同时支持 scale 和 scaleY
    可以合并为完整的 transform 属性：

    <image 
    :style="{ transform: `scale(${scaleX}, ${scaleY})` }" 
    src="/static/image/touxiang.jpg"
></image>
回到顶部