uni-app cli nvue movable组件失效问题

uni-app cli nvue movable组件失效问题

开发环境 版本号 项目创建方式
PC Windows CLI
手机 全部
页面类型 nvue
Vue vue3
打包方式 离线
CLI 3.0.0-alpha-3040620220415002

测试过的手机：

  • ios11
  • 15.0
  • 安卓模拟器

示例代码：

<movable-area style="width:150rpx;height:200rpx;background-color:black">  
    <movable-view out-of-bounds direction="all" inertia style="width:50rpx;height:50rpx;background-color:red">  
    </movable-view>  
</movable-area>

操作步骤：

  1. 新建一个nvue页面。
  2. 复制上述代码至页面中。
  3. 第一次拖动，正常。再次拖动，无法拖动。

预期结果：

可以随时拖动。

实际结果：

首次能拖动，再次拖动失效。

bug描述：

首页移动可以移动，停止后，再次移动，失效，无法拖动。 已捕捉到日志： [JS Framework] Failed to invoke the event handler of “panstart” on div (108): ReferenceError: clearTimeout is not defined


更多关于uni-app cli nvue movable组件失效问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

bug已确认，已加分，后续修复

更多关于uni-app cli nvue movable组件失效问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HBuilderX 3.4.14 已修复

在 uni-app 中使用 nvue 开发时，movable 组件可能会出现失效的问题。以下是一些可能的原因和解决方案：

1. 检查 nvue 页面的正确性

确保你正在使用的是 nvue 页面，而不是 vue 页面。movable 组件在 nvue 页面中才能正常工作。

2. 检查 movable 组件的属性

确保 movable 组件的属性设置正确。例如，direction 属性用于指定可移动的方向，x 和 y 属性用于设置初始位置。

<movable-area style="width: 300px; height: 300px; background-color: #ccc;">
  <movable-view direction="all" x="0" y="0" style="width: 50px; height: 50px; background-color: #f00;">
  </movable-view>
</movable-area>

3. 检查 movable-area 和 movable-view 的尺寸

movable-area 和 movable-view 的尺寸必须正确设置。如果 movable-area 的尺寸过小，movable-view 可能无法正常移动。

4. 检查 movable-view 的层级

确保 movable-view 的层级没有受到其他元素的遮挡。可以通过设置 z-index 来调整层级。

5. 检查 nvue 页面的样式

nvue 页面的样式与 vue 页面有所不同，某些样式属性在 nvue 中可能不支持。确保你使用的样式在 nvue 中是有效的。

6. 检查 nvue 页面的生命周期

确保 movable 组件在页面生命周期中正确初始化。可以在 onReady 生命周期钩子中检查 movable 组件的状态。

export default {
  onReady() {
    console.log('页面已准备好，检查 movable 组件');
  }
}

7. 检查 nvue 页面的版本

确保你使用的 uni-app 版本是最新的，旧版本可能存在一些已知的 bug。可以通过以下命令更新 uni-app：

npm update [@dcloudio](/user/dcloudio)/uni-app
回到顶部