巧用Vue+ElementUI，打造丝滑流畅的移动端图片滑动体验

2023-09-27 13:25:46

在移动设备日益普及的今天，为用户提供流畅、美观的交互体验至关重要。图片滑动作为一种常见的交互方式，可以帮助用户轻松浏览图片库、相册等内容。本文将从零开始，带你一步一步实现Vue+ElementUI的移动端图片滑动功能，并分享实现过程中的技术要点和细节。

前期准备

为了能够顺利进行后续步骤，请确保你已经完成了以下准备工作：

安装并配置好Vue和ElementUI。
准备好用于滑动的图片素材。
创建一个新的Vue项目。

实现步骤

1. 创建图片列表组件

首先，我们需要创建一个Vue组件来管理图片列表。这个组件将负责加载和渲染图片，并监听用户的手指滑动事件。

在src目录下新建一个名为ImageListComponent.vue的文件，并添加以下代码：

<template>
  <div class="image-list">
    <div class="image-item" v-for="image in images" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <img :src="image" alt="">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg',
        // ... 其他图片路径
      ],
      startX: 0, // 手指按下的X坐标
      startY: 0, // 手指按下的Y坐标
      currentX: 0, // 当前手指的X坐标
      currentY: 0, // 当前手指的Y坐标
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
    },
    onTouchMove(e) {
      this.currentX = e.touches[0].clientX
      this.currentY = e.touches[0].clientY
    },
    onTouchEnd(e) {
      const deltaX = this.currentX - this.startX
      const deltaY = this.currentY - this.startY

      if (Math.abs(deltaX) > Math.abs(deltaY)) {
        // 横向滑动
        if (deltaX > 0) {
          // 右滑
          this.prevImage()
        } else {
          // 左滑
          this.nextImage()
        }
      }
    },
    prevImage() {
      const index = this.images.indexOf(this.currentImage)
      if (index > 0) {
        this.currentImage = this.images[index - 1]
      }
    },
    nextImage() {
      const index = this.images.indexOf(this.currentImage)
      if (index < this.images.length - 1) {
        this.currentImage = this.images[index + 1]
      }
    }
  }
}
</script>

<style>
.image-list {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.image-item {
  width: 200px;
  height: 200px;
  margin: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

这个组件包含了一个<div>容器，里面包含若干<div>子元素，每个子元素代表一张图片。每个<div>子元素监听了三个触摸手势事件：touchstart、touchmove和touchend。当用户手指按下时，我们记录手指按下的坐标；当用户手指移动时，我们记录当前手指的坐标；当用户手指松开时，我们计算手指移动的距离和方向，并根据方向来切换图片。

2. 在App.vue中使用图片列表组件

现在，我们需要在App.vue文件中使用刚刚创建的图片列表组件。在<template>标签中添加以下代码：

<ImageListComponent />

这样，图片列表组件就会被渲染到页面上。

3. 添加CSS样式

为了美化图片列表的外观，我们需要添加一些CSS样式。在src/App.vue文件中，添加以下<style>标签：

<style>
.image-list {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.image-item {
  width: 200px;
  height: 200px;
  margin: 10px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>