uni-app打包安卓后动态更新内联样式不生效

uni-app打包安卓后动态更新内联样式不生效

项目信息 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC系统版本 win10家庭版
HBuilderX 正式
HBuilderX版本 4.87
手机系统 Android
手机系统版本 Android 10
手机厂商 联想
手机机型 Z5s
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
    <view>  
        <view class="idx" v-for="i,index in list" :style="i.style" @click="change(index)">  
            {{i.text}}  
        </view>  
    </view>  
</template>  

<script setup>  
    import {ref} from "vue"  
    let list  = ref([  
        {  
            style:{ background:"black",color:"white"},  
            text:"墨色"  
        },  
        {  
            style:{ background:"red",color:"white"},  
            text:"红色"  
        }  
    ])  

    function change(index){  
        list.value[index].style.background = "orange"  
        list.value[index].style.color = "red"  
        list.value[index].text = "橙色"  
    }  
</script>  

<style lang="scss">  
      .idx{  
          // width: 350rpx;  
          height: 100rpx;  
          width: 100rpx;  
      }       
</style>

操作步骤：

  • 云打包安卓或是真机运行

预期结果：

  • 点击后背景颜色和文字颜色，文字内容 都能发生变化

实际结果：

  • 点击后仅文字内容都能发生变化

bug描述：

  • uniapp打包安卓后，动态更新内联样式不生效.

更多关于uni-app打包安卓后动态更新内联样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

该bug反馈内容较为完整，提供了清晰的标题、问题描述、代码示例、复现步骤、预期与实际结果，以及必要的分类信息（版本号、平台等）。代码示例可直接运行，复现步骤明确（云打包安卓或真机运行），预期结果合理。实际结果中样式不更新但文本内容更新的现象表明存在渲染问题。
根据知识库分析，该问题很可能已在高版本修复。用户使用的HBuilderX 4.87版本较旧，而知识库中记录多个Android平台CSS样式相关修复：

App-Android平台修复了"组件swiper设置border-radius不生效"问题 链接
修复了"CSS同时设置display和visibility可能出现其中一个属性不生效"的Bug 链接
修复了"vue组件:style绑定中定义的非响应式数据运行时报类型不兼容错误" 链接

这些修复集中在4.16+版本（高于用户当前4.87），表明动态样式更新问题在旧版Android平台确实存在。建议用户升级至最新HBuilderX版本（当前知识库最新为4.16.2024051009-alpha），或改用class绑定替代内联样式以规避问题。若需保留当前版本，可尝试在change函数末尾添加uni.$forceUpdate()强制刷新视图。 内容为 AI 生成，仅供参考

更多关于uni-app打包安卓后动态更新内联样式不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我已经找到问题所在，看了一位大佬的回复相类似的问题，：style = “object”,换一种写法就没有问题了：style = “[object]”.

这是一个典型的响应式数据更新问题。在Vue 3的<script setup>语法中，直接修改对象属性不会触发视图更新。

问题出现在change函数中：

function change(index){  
    list.value[index].style.background = "orange"  // 直接修改对象属性
    list.value[index].style.color = "red"         // 不会触发响应式更新
    list.value[index].text = "橙色"  
}

解决方案：

  1. 使用Object.assign()创建新对象（推荐）：
function change(index){  
    list.value[index] = {
        ...list.value[index],
        style: {
            ...list.value[index].style,
            background: "orange",
            color: "red"
        },
        text: "橙色"
    }
}
  1. 使用Vue.set风格的方法：
import { reactive } from 'vue'

// 将list改为reactive
const list = reactive([...])

function change(index){  
    Object.assign(list[index].style, {
        background: "orange",
        color: "red"
    })
    list[index].text = "橙色"
}
  1. 使用计算属性或ref包裹style：
const list = ref([
    {
        style: ref({ background:"black", color:"white" }),
        text: "墨色"
    }
])

function change(index){  
    list.value[index].style.value.background = "orange"
    list.value[index].style.value.color = "red"
    list.value[index].text = "橙色"
}
回到顶部