快捷導(dǎo)航

vue利用vant組件實(shí)現(xiàn)輪播圖效果

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

vant組件適用于移動(dòng)端項(xiàng)目,目前項(xiàng)目開源,是市面上做的比較好的開源項(xiàng)目,功能比較強(qiáng)大,本文小編就來(lái)為大家介紹一下如何利用vant實(shí)現(xiàn)輪播圖效果吧

1.引言

在互聯(lián)網(wǎng)日漸內(nèi)卷的情況下，越來(lái)越注重用戶體驗(yàn)，輪播圖的應(yīng)用場(chǎng)景越來(lái)越廣泛，如應(yīng)用于以下場(chǎng)景

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

同時(shí)，市場(chǎng)上的輪播圖組件功能也越來(lái)越成熟，以下我們就介紹目前常見(jiàn)的實(shí)現(xiàn)輪播圖的方式。實(shí)現(xiàn)效果如下：

vant示例：

自實(shí)現(xiàn)：

2.vue實(shí)現(xiàn)輪播圖

2.1 Vant組件引入

vant組件適用于移動(dòng)端項(xiàng)目，目前項(xiàng)目開源，是市面上做的比較好的開源項(xiàng)目，功能比較強(qiáng)大，我們先介紹vant實(shí)現(xiàn)輪播圖效果。對(duì)于pc端實(shí)現(xiàn)輪播圖，市場(chǎng)上也有成熟的組件，如Swipe。

2.1.1 vant組件引入

Vant組件安裝引入以及配置在前面我們已經(jīng)做過(guò)介紹，請(qǐng)產(chǎn)找以往鏈接：

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>

可實(shí)現(xiàn)如下動(dòng)畫效果：

若是想進(jìn)行圖片輪播，vant組件還提供了懶加載選項(xiàng)，以解決圖片加載過(guò)慢卡頓問(wèn)題，代碼如下：

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

其次，除了以上功能以外，還可以進(jìn)行自定義滑塊大小和改變輪播方向等操作，這里不做一一介紹，詳情請(qǐng)見(jiàn)官網(wǎng)：

vue3中vant輪播圖使用。

2.2 vue代碼實(shí)現(xiàn)

“魚”和”漁“相差還是比較大的，除了借助市場(chǎng)組件以外，還可以自己按照需求開發(fā)輪播圖，以下我們?cè)敿?xì)介紹一下自己實(shí)現(xiàn)輪播圖的思路與實(shí)現(xiàn)步驟，最后附上我們實(shí)現(xiàn)的代碼以供參考。

2.2.1 功能需求

實(shí)現(xiàn)圖片輪播；
輪播圖切換流暢；
可自動(dòng)輪播和手動(dòng)觸發(fā)。

2.2.2 實(shí)現(xiàn)思路

將需要輪播的圖片進(jìn)行排列；
添加手動(dòng)切換按鈕。
圖片切換之間添加動(dòng)畫效果；
添加切換邏輯，將排列好的圖片進(jìn)行切換；

2.2.3 代碼實(shí)現(xiàn)

實(shí)現(xiàn)思路代碼以及相關(guān)注釋如下：

<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="暫無(wú)圖片"
      />
    </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: "", //動(dòng)態(tài)樣式
      currentSlide: 0, //播放序號(hào)
      interval: Object,
    }
  },
  mounted() {
    // 自動(dòng)播放動(dòng)畫
    this.startSlideshow()
  },
  methods: {
    nextSlide() {
      // 每次指針加一
      this.currentSlide = (this.currentSlide + 1) % this.images.length
      this.setStyle();
    },
    prevSlide() {
      // 每次減一，為負(fù)數(shù)時(shí)循環(huán)
      this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
      this.setStyle();
    },
    // 圖片動(dòng)畫
    setStyle() {
      this.dynamicstyle = `translatex(-${this.currentSlide*100}%)`
    },
    // 定時(shí)器
    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>

以上代碼樣式部分還可以進(jìn)行精簡(jiǎn)，僅供學(xué)習(xí)參考，商業(yè)項(xiàng)目需要進(jìn)行調(diào)試修改，思路可供參考。

需要注意以下幾點(diǎn)：