uni-app movable-view设置Y轴失败

uni-app movable-view设置Y轴失败

示例代码：

<movable-view class="list-item" direction="all" v-for="item in dataList" :y="item.y" :damping="40" @touchstart="mousedown(item)" @touchend="mouseup(item)" @mousedown="mousedown(item)" @mouseup="mouseup(item)" :style="{opacity: `${item.opacity}`, width: viewWidth + 'px', height: viewWidth + 'px'}" :key="item.id" @change="handleChange($event, item)">

操作步骤：

  • 创建movable-area 里面再创建一个movable-view direction=“all” 然后设定y的值

预期结果：

  • transform里面的translateY值会发生改变

实际结果：

  • transform里面的translateY值会未发生改变

bug描述：

  • movable-view设置Y轴不生效

image

项目信息 版本/方式
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 3.4.18
HBuilderX类型 正式
HBuilderX版本号 3.95
第三方开发者工具版本号 1.06.2209070
基础库版本号 12.13.6
项目创建方式 HBuilderX

更多关于uni-app movable-view设置Y轴失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

在原生微信小程序中测试是否有问题，如有问题请向微信开发者社区反馈。

更多关于uni-app movable-view设置Y轴失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没事了，是movable-area的高度设置出了问题，谢谢

回复 2***@qq.com: 你是设置成了什么呀，是不是不能用all？

在 uni-app 中使用 movable-view 组件时，如果你发现设置 Y 轴（垂直方向）失败，可能是由于以下几个原因导致的。以下是一些常见的问题和解决方法：

1. movable-area 的高度未设置或设置不正确

movable-view 必须在 movable-area 内移动，而 movable-area 的高度必须明确设置。如果 movable-area 的高度未设置或设置不正确，movable-view 可能无法在 Y 轴上移动。

解决方法： 确保 movable-area 的高度设置为一个有效的值，例如：

<movable-area style="height: 300px;">
  <movable-view direction="vertical" style="height: 100px;">
    <!-- 内容 -->
  </movable-view>
</movable-area>

2. movable-view 的 direction 属性未设置或设置不正确

movable-view 的 direction 属性决定了它可以在哪个方向上移动。如果 direction 未设置为 vertical 或 all，movable-view 将无法在 Y 轴上移动。

解决方法： 确保 direction 属性设置为 vertical 或 all，例如：

<movable-view direction="vertical">
  <!-- 内容 -->
</movable-view>

3. movable-view 的 y 属性未设置或设置不正确

如果你希望通过代码控制 movable-view 的 Y 轴位置，可以使用 y 属性。如果 y 属性未设置或设置不正确，movable-view 可能不会在 Y 轴上移动。

解决方法： 确保 y 属性设置为一个有效的值，例如：

<movable-view :y="100">
  <!-- 内容 -->
</movable-view>

4. movable-view 的 inertia 属性未设置或设置不正确

inertia 属性决定了 movable-view 是否可以在移动时具有惯性效果。如果 inertia 未设置为 true，movable-view 可能无法在 Y 轴上自由移动。

解决方法： 确保 inertia 属性设置为 true，例如：

<movable-view inertia="true">
  <!-- 内容 -->
</movable-view>

5. movable-view 的 out-of-bounds 属性未设置或设置不正确

out-of-bounds 属性决定了 movable-view 是否可以超出 movable-area 的边界。如果 out-of-bounds 未设置为 true，movable-view 可能无法在 Y 轴上自由移动。

解决方法： 确保 out-of-bounds 属性设置为 true，例如：

<movable-view out-of-bounds="true">
  <!-- 内容 -->
</movable-view>

6. CSS 样式冲突

有时，CSS 样式可能会影响 movable-view 的移动。例如，position、overflow 等属性可能会限制 movable-view 的移动。

解决方法： 检查并确保 movable-view 和 movable-area 的 CSS 样式没有冲突，例如：

movable-area {
  position: relative;
  overflow: hidden;
}

movable-view {
  position: absolute;
}

7. 平台差异

uni-app 支持多平台，不同平台可能会有不同的表现。如果你在某个平台上遇到问题，可以尝试在其他平台上测试，或者查阅 uni-app 官方文档以了解平台差异。

解决方法： 查阅 uni-app 官方文档，了解不同平台的差异，并根据需要进行调整。

示例代码

以下是一个完整的示例代码，展示了如何正确设置 movable-view 在 Y 轴上移动：

<template>
  <movable-area style="height: 300px;">
    <movable-view direction="vertical" :y="y" @change="onChange" style="height: 100px;">
      <!-- 内容 -->
    </movable-view>
  </movable-area>
</template>

<script>
export default {
  data() {
    return {
      y: 0
    };
  },
  methods: {
    onChange(e) {
      this.y = e.detail.y;
    }
  }
};
</script>

<style>
movable-area {
  position: relative;
  overflow: hidden;
}

movable-view {
  position: absolute;
}
</style>
回到顶部