uni-app小程序拖动图片功能

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

uni-app小程序拖动图片功能

2 回复

插件市场搜 drag


当然,以下是一个使用uni-app实现拖动图片功能的示例代码。我们将利用uni-app的触摸事件(如touchstarttouchmovetouchend)来实现图片的拖动。

首先,在你的uni-app项目中创建一个新的页面,比如dragImage.vue,然后在该页面的模板部分添加一个图片元素,并绑定相应的触摸事件:

<template>
  <view class="container">
    <image
      class="draggable-image"
      :src="imageSrc"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
      :style="{ left: imagePosition.x + 'px', top: imagePosition.y + 'px' }"
    />
  </view>
</template>

接下来,在页面的脚本部分定义相关的数据和方法:

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/your-image.jpg', // 替换为你的图片URL
      imagePosition: { x: 0, y: 0 },
      startX: 0,
      startY: 0,
      lastX: 0,
      lastY: 0,
      dragging: false,
    };
  },
  methods: {
    onTouchStart(event) {
      this.startX = event.touches[0].clientX - this.imagePosition.x;
      this.startY = event.touches[0].clientY - this.imagePosition.y;
      this.dragging = true;
    },
    onTouchMove(event) {
      if (!this.dragging) return;
      this.imagePosition.x = event.touches[0].clientX - this.startX;
      this.imagePosition.y = event.touches[0].clientY - this.startY;
    },
    onTouchEnd() {
      this.dragging = false;
    },
  },
};
</script>

最后,为图片添加一些基本的样式,使其在页面上可见,并允许我们拖动它:

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.draggable-image {
  position: absolute;
  width: 100px; /* 根据需要调整图片大小 */
  height: 100px; /* 根据需要调整图片大小 */
  cursor: grab;
}

.draggable-image:active {
  cursor: grabbing;
}
</style>

在这个示例中,我们定义了一个图片元素,并通过绑定触摸事件来实现拖动功能。onTouchStart方法记录触摸开始时的位置,onTouchMove方法根据触摸移动的距离更新图片的位置,onTouchEnd方法结束拖动状态。通过修改imagePosition对象中的xy属性,我们可以动态地更新图片的位置,从而实现拖动效果。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!