uni-app movable-view在nvue页面设置动态值后,可移动区域不会更新

发布于 1周前 作者 wuwangju 来自 Uni-App

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官方文档或社区论坛获取最新信息。

回到顶部