vue利用vant組件實現輪播圖效果

更新時間：2023年10月07日 09:07:31 作者：Saga?Two

vant組件適用于移動端項目,目前項目開源,是市面上做的比較好的開源項目,功能比較強大,本文小編就來為大家介紹一下如何利用vant實現輪播圖效果吧

1.引言

在互聯網日漸內卷的情況下，越來越注重用戶體驗，輪播圖的應用場景越來越廣泛，如應用于以下場景

商品詳情頁。在商品詳情頁中展示足夠的商品信息，可以將輪播圖比作一個團隊，每個團隊成員都有自己的工作，例如首圖負責吸引流量，其余的負責商品的賣點、促銷信息、購物保障等等。
商品賣點展示。在輪播圖中靠前位置展示買家最看重的商品賣點，可以減少買家的購買決策時長。例如，如果商品在做促銷活動或者小贈品時，就可以把活動或者禮品圖放在靠前的輪播圖上。
首頁重點場景突出。如重點產品、常用功能入口，熱門活動等場景。

同時，市場上的輪播圖組件功能也越來越成熟，以下我們就介紹目前常見的實現輪播圖的方式。實現效果如下：

vant示例：

自實現：

2.vue實現輪播圖

2.1 Vant組件引入

vant組件適用于移動端項目，目前項目開源，是市面上做的比較好的開源項目，功能比較強大，我們先介紹vant實現輪播圖效果。對于pc端實現輪播圖，市場上也有成熟的組件，如Swipe。

2.1.1 vant組件引入

Vant組件安裝引入以及配置在前面我們已經做過介紹，請產找以往鏈接：

vue2：vue2引入vant組件
vue3：vue3引入vant組件

2.2.2 使用van-swipe組件

van-swipe組件和van-swipe-item組件配合使用，原始代碼如下：

        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">
            <van-swipe-item>vant-swipe</van-swipe-item>
            <van-swipe-item class="dif">2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>

可實現如下動畫效果：

若是想進行圖片輪播，vant組件還提供了懶加載選項，以解決圖片加載過慢卡頓問題，代碼如下：

<van-swipe :autoplay="3000" lazy-render>
  <van-swipe-item v-for="image in images" :key="image">
    <img :src="image" />
  </van-swipe-item>
</van-swipe>

其次，除了以上功能以外，還可以進行自定義滑塊大小和改變輪播方向等操作，這里不做一一介紹，詳情請見官網：

vue3中vant輪播圖使用。

2.2 vue代碼實現

“魚”和”漁“相差還是比較大的，除了借助市場組件以外，還可以自己按照需求開發(fā)輪播圖，以下我們詳細介紹一下自己實現輪播圖的思路與實現步驟，最后附上我們實現的代碼以供參考。

2.2.1 功能需求

實現圖片輪播；
輪播圖切換流暢；
可自動輪播和手動觸發(fā)。

2.2.2 實現思路

將需要輪播的圖片進行排列；
添加手動切換按鈕。
圖片切換之間添加動畫效果；
添加切換邏輯，將排列好的圖片進行切換；

2.2.3 代碼實現

實現思路代碼以及相關注釋如下：

<template>
  <div class="carousel">
    <div @click="prevSlide" class="carousel-prev-icon-left"></div>
    <div class="carousel-slides">
      <img
        v-for="(image, index) in images"
        :key="index"
        :src="image"
        :style="{left: index * 100 + '%', 'transform': dynamicstyle}"
        alt="暫無圖片"
      />
    </div>
    <div @click="nextSlide" class="carousel-prev-icon-right"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      images: [
        '/src/assets/img/sakuraTree01.jpeg',
        '/src/assets/img/starrySky.jpg',
        '/src/assets/img/starrySky02.jpg'
        // ... 更多圖片
      ],
      dynamicstyle: "", //動態(tài)樣式
      currentSlide: 0, //播放序號
      interval: Object,
    }
  },
  mounted() {
    // 自動播放動畫
    this.startSlideshow()
  },
  methods: {
    nextSlide() {
      // 每次指針加一
      this.currentSlide = (this.currentSlide + 1) % this.images.length
      this.setStyle();
    },
    prevSlide() {
      // 每次減一，為負數時循環(huán)
      this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
      this.setStyle();
    },
    // 圖片動畫
    setStyle() {
      this.dynamicstyle = `translatex(-${this.currentSlide*100}%)`
    },
    // 定時器
    startSlideshow() {
      this.interval = setInterval(() => {
        this.currentSlide = (this.currentSlide + 1) % this.images.length;
        this.setStyle();
      }, 3000)
    },
    stopSlideshow() {
      clearInterval(this.interval)
    }
  }
}
</script>
<style scoped>
.carousel {
  position: relative;
}
.carousel-slides {
  position: relative;
  width: 320px;
  height: 173px;
  overflow: hidden;
}
.carousel-slides img {
  display: inline-block;
  position: absolute;
  width: inherit;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  height: 100%;
  transition: 0.5s transform ease-in-out;
}
.carousel-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
}
.carousel-prev-icon-left {
  position: absolute;
  left: 10px;
  top: 55px;
  height: 50px;
  width: 40px;
  border: none;
  background-image: url(../../../assets/img/arrow-l.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
}
.carousel-prev-icon-right {
  position: absolute;
  right: 10px;
  top: 55px;
  height: 50px;
  width: 40px;
  border: none;
  background-image: url('../../../assets/img/arrow-r.png/');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 999;
}
</style>

以上代碼樣式部分還可以進行精簡，僅供學習參考，商業(yè)項目需要進行調試修改，思路可供參考。

需要注意以下幾點：