uni-app movable-view x vue3 setup 修改了值之后不会刷新组件不生效

uni-app movable-view x vue3 setup 修改了值之后不会刷新组件不生效

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

产品分类

  • uniapp/App

PC开发环境

  • 操作系统：Windows
  • HBuilderX类型：正式
  • HBuilderX版本号：4.75

手机系统

  • 系统：Android
  • 系统版本号：Android 16
  • 手机厂商：vivo
  • 手机机型：iqoo net7

页面类型

  • vue版本：vue3

打包方式

  • 云端

Bug描述

拖拽完了，他不会滚动到 x=20 哪里

<movable-area style="border: 1px solid red; width: 100%; height: 30rpx;">
<movable-view :x="x" direction="horizontal" @change="onChange" @touchend="endTouch">text</movable-view>
</movable-area> 

<script setup>
import {  
    ref,  
    reactive,  
    computed  
} from 'vue';  
const x = ref(0);  

const onChange = (e) => {  
    console.log(e);  
}  

const endTouch = (e) => {  
    console.log('重置');  
    x.value = 20;  
}  
</script>

更多关于uni-app movable-view x vue3 setup 修改了值之后不会刷新组件不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

文档中有提到，可以看一下这个：https://uniapp.dcloud.net.cn/tutorial/vue-api.html#componentsolutions

更多关于uni-app movable-view x vue3 setup 修改了值之后不会刷新组件不生效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


还是不可以

在 Vue3 的 setup 语法糖中，movable-view 的 x 属性绑定响应式变量后，直接修改变量值可能不会触发视图更新。这是因为 movable-view 组件内部对拖拽状态有特殊管理机制。

解决方案：

  1. 使用 nextTick 确保 DOM 更新后再修改值
  2. 通过修改 key 强制重新渲染组件

修改后的代码示例：

<movable-area style="border: 1px solid red; width: 100%; height: 30rpx;">
  <movable-view 
    :key="forceUpdate"  <!-- 新增 key 强制更新 -->
    :x="x" 
    direction="horizontal" 
    @change="onChange" 
    @touchend="endTouch"
  >
    text
  </movable-view>
</movable-area>

<script setup>
import { ref, nextTick } from 'vue'

const x = ref(0)
const forceUpdate = ref(0)  // 用于强制重新渲染

const onChange = (e) => {
  console.log(e)
}

const endTouch = async (e) => {
  console.log('重置')
  await nextTick()  // 等待当前渲染周期完成
  x.value = 20
  forceUpdate.value++  // 触发重新渲染
}
</script>
回到顶部