Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか?

Vue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか?

Vue プロジェクトでは、多くの場合、多数の画像を表示する必要があるため、ユーザーがこれらの画像を簡単に参照してプレビューできることを望んでいます。この記事では、Vue コンポーネントを使用して画像のスクロール機能やサムネイル プレビュー機能を実装する方法を紹介します。

まず、画像のスクロールとサムネイル プレビューを容易にするために、適切な Vue ライブラリをインストールして導入する必要があります。この例では、vue-awesome-swiper ライブラリと vue-image-preview ライブラリを使用してこの関数を実装します。

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

次に、画像を表示する必要があるコンポーネントに、対応するライブラリを導入します。

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

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

次に、画像のスクロールとサムネイル プレビューを実装するコードの記述を開始できます。

まず、以下に示すように、一連の画像データを準備する必要があります。

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

次に、ページ上で vue-awesome-swiper を使用してスクロールを表示します。画像の効果 :

<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="/static/imghwm/default1.png"  data-src="image"  class="lazy"  : 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>

上記のコードでは、vue-awesome-swiper を使用して画像スクロールのカルーセル コンポーネントを作成し、ループを通じて各画像を表示し、@ click イベントを実行してプレビュー機能をトリガーします。プレビュー中に、$preview メソッドを呼び出してサムネイル プレビューを表示しました。

最後に、ルート コンポーネントで画像表示コンポーネントを使用します。

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

<script>
import Gallery from './Gallery'

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

これで、画像のスクロール機能とサムネイル プレビュー機能の実装が完了しました。ユーザーが任意の画像をクリックすると、フローティング レイヤーがポップアップしてすべての画像のサムネイルが表示され、サムネイルをスライドまたはクリックすることでプレビュー画像を切り替えることができます。同時に、ユーザーは左または右にスワイプしてすべての写真を参照することもできます。

概要:

Vue プロジェクトでは、2 つのライブラリ vue-awesome-swiper と vue-image-preview を使用して、次のことができます。写真のスクロールやサムネイルプレビュー機能を実現すると非常に便利です。シンプルな構成とコードの記述により、ユーザーが大量の画像を簡単に参照してプレビューできる、優れたユーザー エクスペリエンスを提供できます。

以上がVue で画像のスクロールとサムネイル プレビューを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。