movable-area动态修改高度后uni-app页面异常

movable-area动态修改高度后uni-app页面异常

开发环境 版本号 项目创建方式
Mac 15.5 HBuilderX

产品分类：uniapp/App

测试过的手机：

iPhone11 iOS 18.0; 鸿蒙next

示例代码：

<movable-area :style="{ width: '100%', height: allQuestionHeight + 'px' }">  
    <movable-view  
        class="base-drag-wrapper"  
        v-for="item in questions"  
        :key="item.id"  
        :y="item.y"  
        style="width: 100%;"  
        direction="vertical"  
        @change="handleMove"  
    >  
        <view class="question-item">  
            <text>{{ item.text }}</text>  
        </view>  
    </movable-view>  
</movable-area>

onMounted(() => {  
    // 注释修改高度的代码就正常显示  
    setTimeout(() => {  
        allQuestionHeight.value = 200;  
    }, 500);  
});

更多关于movable-area动态修改高度后uni-app页面异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于movable-area动态修改高度后uni-app页面异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在动态修改movable-area高度时出现页面异常，通常是由于组件内部状态未正确更新导致的。movable-area组件在初始化时会根据初始高度计算内部布局，后续动态修改height属性可能不会触发完整的重新渲染。

建议采用以下解决方案：

  1. 使用key强制重新渲染：
<movable-area 
  :key="allQuestionHeight"
  :style="{ width: '100%', height: allQuestionHeight + 'px' }">
  1. 在修改高度后调用nextTick确保DOM更新：
import { nextTick } from 'vue'

setTimeout(async () => {
  allQuestionHeight.value = 200
  await nextTick()
  // 可选的重新初始化操作
}, 500)
回到顶部