How to implement image scrolling and thumbnail preview in Vue?

How to implement image scrolling and thumbnail preview in Vue?

In Vue projects, we often need to display a large number of pictures, and hope that users can browse and preview these pictures easily. This article will introduce how to use Vue components to implement image scrolling and thumbnail preview functions.

First, we need to install and introduce the appropriate Vue library to facilitate image scrolling and thumbnail preview. In this example, we will use vue-awesome-swiper and vue-image-preview libraries to implement this function.

npm install vue-awesome-swiper vue-image-preview

Then, in the component that needs to display pictures, introduce the corresponding library:

import VueAwesomeSwiper from 'vue-awesome-swiper'
import VueImagePreview from 'vue-image-preview'

Vue.use(VueAwesomeSwiper)
Vue.use(VueImagePreview)

Next, we can start writing code to implement picture scrolling and thumbnail preview.

First, we need to prepare a set of image data, as shown below:

data() {
  return {
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg',
      // ...
    ]
  }
},

Then, use vue-awesome-swiper on the page to display the scrolling effect of the image ：

<template>
  <div class="gallery">
    <swiper :options="swiperOptions" v-if="images.length > 0">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(image, index) in images" :key="index">
          <img :src="image" alt="image" @click="previewImage(index)" />
        </div>
      </div>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg',
        // ...
      ],
      swiperOptions: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      }
    }
  },
  methods: {
    previewImage(index) {
      this.$preview({
        images: this.images.map(image => ({ url: image })),
        startPosition: index
      })
    }
  }
}
</script>

In the above code, we use vue-awesome-swiper to create a carousel component of image scrolling, display each image through a loop, and use @ click event to trigger the preview function. During preview, we called the $preview method to display the thumbnail preview.

Finally, use the image display component in the root component:

<template>
  <div>
    <gallery></gallery>
  </div>
</template>

<script>
import Gallery from './Gallery'

export default {
  components: {
    Gallery
  }
}
</script>

Now, we have completed the implementation of the image scrolling and thumbnail preview functions. When the user clicks on any picture, a floating layer will pop up to display the thumbnails of all pictures, and the user can switch the previewed pictures by sliding or clicking on the thumbnails. At the same time, users can also browse all pictures by swiping left or right.

Summary:

In the Vue project, by using the two libraries vue-awesome-swiper and vue-image-preview, we can It is very convenient to realize the scrolling and thumbnail preview functions of pictures. Through simple configuration and code writing, we can provide a good user experience, allowing users to easily browse and preview a large number of images.

The above is the detailed content of How to implement image scrolling and thumbnail preview in Vue?. For more information, please follow other related articles on the PHP Chinese website!