注册登录

浮世

发布：2025-07-29 11:48
更新：2025-07-29 13:59
阅读：68

【报Bug】movable-view x vue3 setup 修改了值之后，不会刷新组件，不生效

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 11

HBuilderX类型：正式

HBuilderX版本号： 4.75

手机系统： Android

手机系统版本号： Android 16

手机厂商： vivo

手机机型： iqoo net7

页面类型： vue

vue版本： vue3

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<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>

操作步骤：

<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>

预期结果：

<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>

实际结果：

<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>

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>

2025-07-29 11:48 负责人:无分享

2 个回复

DCloud_UNI_yuhe

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

浮世 (作者)

还是不可以

要回复问题请先登录或注册