uni-app movable-view在nvue页面设置动态值后,可移动区域不会更新
uni-app movable-view在nvue页面设置动态值后,可移动区域不会更新
测试过的手机:
- iphone12(17.6.1)
- 华为mate60
- mumu安卓模拟器
操作步骤:
- 给movable-view在nvue页面中设置动态值
预期结果:
- 可移动区域更新
实际结果:
- 可移动区域未更新
bug描述:
- movable-view在nvue页面设置动态值后,可移动区域不会更新
| 信息类别 | 信息内容 |
|------------------|----------------------------|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | 22621.3007 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.99 |
| 手机系统 | 全部 |
| 手机系统版本号 | iOS 17 |
| 手机厂商 | 苹果 |
| 页面类型 | nvue |
| vue版本 | vue3 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
| nvue编译模式 | fast(注释掉的信息,未包含在最终输出中) |
| 图片 | 无 |
2 回复
我也遇到此问题,vue2,.vue格式的页面
在uni-app中,movable-view
组件允许在页面中创建一个可移动的区域。在nvue页面中,如果你发现动态设置movable-view
的属性后,可移动区域没有更新,这通常是由于视图层未正确刷新或者数据绑定未生效所导致的。以下是一个示例代码,展示如何在nvue页面中动态更新movable-view
的可移动区域。
首先,确保你的nvue页面已经正确引入了uni-app的基础库,并且movable-view
组件可用。
<!-- pages/index/index.nvue -->
<template>
<div>
<button @click="updateBounds">Update Bounds</button>
<movable-view :style="{width: '100px', height: '100px', backgroundColor: 'red'}"
:direction="direction"
:out-of-bounds="outOfBounds"
:x="x" :y="y"
@change="onMoveChange">
Move me
</movable-view>
<rect :style="boundsStyle"></rect> <!-- Visual representation of bounds -->
</div>
</template>
<script>
export default {
data() {
return {
direction: 'all',
outOfBounds: false,
x: 0,
y: 0,
bounds: { left: 0, top: 0, right: 300, bottom: 300 } // Initial bounds
};
},
computed: {
boundsStyle() {
return {
position: 'absolute',
left: `${this.bounds.left}px`,
top: `${this.bounds.top}px`,
right: `${this.bounds.right}px`,
bottom: `${this.bounds.bottom}px`,
borderWidth: 2,
borderColor: 'blue',
borderStyle: 'solid'
};
}
},
methods: {
updateBounds() {
this.bounds = { left: 50, top: 50, right: 250, bottom: 250 }; // New bounds
// Force update by changing a non-visual property
this.direction = this.direction === 'all' ? 'none' : 'all';
this.$nextTick(() => {
this.direction = 'all'; // Reset direction
});
},
onMoveChange(e) {
this.x = e.detail.x;
this.y = e.detail.y;
}
}
};
</script>
在上述代码中,movable-view
组件的边界(bounds
)是通过计算属性boundsStyle
动态设置的,虽然movable-view
本身不直接支持bounds
属性,但这里用矩形rect
元素来可视化显示边界。按钮点击事件updateBounds
方法会更新边界值,并通过切换direction
属性来强制视图刷新(这是一种常见的技巧,用于解决视图不更新的问题)。
注意,movable-view
组件在nvue中的具体实现和行为可能有所不同,上述代码主要展示了如何通过数据绑定和视图刷新来动态更新属性。如果movable-view
组件在nvue中有特定的限制或行为,请参考uni-app官方文档或社区论坛获取最新信息。