vue实现图片滑动预览

实现图片滑动预览的基本思路

在Vue中实现图片滑动预览功能，通常结合手势库（如hammer.js）或监听鼠标/触摸事件来实现滑动效果。核心逻辑包括图片列表渲染、滑动动画处理、手势事件绑定等。

基础实现方案

安装依赖 需要安装vue-touch或hammer.js等手势库：

npm install hammerjs --save

组件模板结构

<template>
  <div class="image-preview-container" ref="container">
    <div class="image-list" :style="listStyle">
      <img 
        v-for="(img, index) in images" 
        :key="index" 
        :src="img" 
        @click="handleClick(index)"
      >
    </div>
  </div>
</template>

核心脚本逻辑

import Hammer from 'hammerjs';

export default {
  data() {
    return {
      currentIndex: 0,
      translateX: 0,
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg'
      ]
    }
  },
  computed: {
    listStyle() {
      return {
        transform: `translateX(${this.translateX}px)`,
        transition: 'transform 0.3s ease'
      };
    }
  },
  mounted() {
    this.initSwipe();
  },
  methods: {
    initSwipe() {
      const hammer = new Hammer(this.$refs.container);
      hammer.on('swipeleft', () => {
        if (this.currentIndex < this.images.length - 1) {
          this.currentIndex++;
          this.updatePosition();
        }
      });
      hammer.on('swiperight', () => {
        if (this.currentIndex > 0) {
          this.currentIndex--;
          this.updatePosition();
        }
      });
    },
    updatePosition() {
      const containerWidth = this.$refs.container.offsetWidth;
      this.translateX = -this.currentIndex * containerWidth;
    },
    handleClick(index) {
      this.currentIndex = index;
      this.updatePosition();
    }
  }
}

样式处理要点

.image-preview-container {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.image-list {
  display: flex;
  height: 100%;
  width: 100%;
}

.image-list img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

进阶优化方向

添加过渡动画 通过CSS的transition属性实现平滑滑动效果：

.image-list {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

无限循环滑动 修改滑动逻辑实现无限循环：

handleSwipe(direction) {
  if (direction === 'left') {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
  } else {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
  }
  this.updatePosition();
}

缩略图导航 添加缩略图显示和导航功能：

<div class="thumbnails">
  <img 
    v-for="(img, index) in images" 
    :key="index" 
    :src="img"
    :class="{active: currentIndex === index}"
    @click="handleThumbClick(index)"
  >
</div>

使用现成组件库

对于快速实现，可以考虑使用现成的Vue组件：

npm install vue-awesome-swiper --save

示例用法

import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      images: ['img1.jpg', 'img2.jpg', 'img3.jpg']
    }
  }
}

<swiper :options="swiperOption">
  <swiper-slide v-for="(img, index) in images" :key="index">
    <img :src="img">
  </swiper-slide>
</swiper>