uni-app中可移动视图容器movable-view的缩放能否实现仅作用于x轴或y轴进行缩小或放大？

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

uni-app中可移动视图容器movable-view的缩放能否实现仅作用于x轴或y轴进行缩小或放大？

可移动视图容器movable-view的缩放能不能实现缩小或放大只作用于x或y呢？

开发环境 版本号 项目创建方式
Harmonyos Next教程
2 回复

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000+项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解


在uni-app中，movable-view 组件提供了移动和缩放视图的功能。要实现仅作用于x轴或y轴的缩放，可以通过设置 scalable 属性为 true 并结合 scale 属性来管理缩放比例。然而，movable-view 本身并没有直接提供仅对x轴或y轴进行缩放的属性。不过，我们可以通过监听缩放事件并手动调整缩放比例来实现这一需求。

以下是一个示例代码，展示了如何实现仅对x轴或y轴进行缩放：

<template>
  <view class="container">
    <movable-view
      :direction="direction"
      inertia="true"
      out-of-bounds="clamp"
      :x="x"
      :y="y"
      :scale="scale"
      @scale="onScale"
      style="width: 300px; height: 300px; background-color: #ccc;">
      <view class="movable-content">Content</view>
    </movable-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      x: 0,
      y: 0,
      scale: { x: 1, y: 1 },
      direction: 'all', // allow all directions for movement
      initialScale: 1, // initial scale
      scaleAxis: 'x', // or 'y' to scale only on y-axis
    };
  },
  methods: {
    onScale(event) {
      const { scale } = event.detail;
      if (this.scaleAxis === 'x') {
        this.scale.x = this.initialScale * scale;
        this.scale.y = this.initialScale;
      } else if (this.scaleAxis === 'y') {
        this.scale.x = this.initialScale;
        this.scale.y = this.initialScale * scale;
      }
    },
  },
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.movable-content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
</style>

在这个示例中，我们定义了一个 movable-view 组件，并通过 scale 属性来管理缩放比例。我们用一个对象 { x, y } 来分别记录x轴和y轴的缩放比例。在 onScale 方法中，根据 scaleAxis 的值（‘x’ 或 ‘y’），我们仅更新对应的轴缩放比例，而保持另一个轴的缩放比例不变。

注意，由于 movable-view 的 scale 属性实际上接受的是一个数值而非对象，这里我们采用了一个变通的方法，即内部维护一个对象来记录缩放比例，并在需要时手动计算最终的缩放值。实际使用时，可能需要进一步调整以适应具体需求。

回到顶部