快捷導(dǎo)航

swiper在vue中的簡單使用方法

更新時間：2022年09月20日 10:18:50 作者：Drizzlejj

Swiper常用于移動端網(wǎng)站的內(nèi)容觸摸滑動,Swiper是純javascript打造的滑動特效插件,面向手機(jī)、平板電腦等移動終端,下面這篇文章主要給大家介紹了關(guān)于swiper在vue中的簡單使用方法,需要的朋友可以參考下

本次使用的是 swiper5，swiper 不同版本在使用的過程會有一些差別

說明：本次示例中 skuImageList 是圖片列表，由父組件從服務(wù)器獲取然后傳給這個輪播子組件使用

服務(wù)器返回的數(shù)據(jù)結(jié)構(gòu)如下，一個數(shù)組包含了幾個對象，對象里有圖片

html 結(jié)構(gòu)，根據(jù)自己的需要進(jìn)行刪減，本次只保留了前進(jìn)后退按鈕

<template>
  <div style="width: 350px;">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in skuImageList" :key="item.id">
          <img :src="item.imgUrl" alt="" />
        </div>
      </div>
      <!-- 如果需要導(dǎo)航按鈕 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</template>

js部分

說明：本次使用swiper5，因為是從服務(wù)器獲取的數(shù)據(jù)，所以放在了 updata 生命周期中。

本次設(shè)置了輪播顯示的圖片數(shù)量，以及輪播圖片的高度。

<script>
import Swiper from "swiper";
import "swiper/css/swiper.min.css";
export default {
  name: "Smallswiper",
  props: ["skuImageList"],
  updated() {
    new Swiper(".swiper-container", {
      loop: true, // 循環(huán)模式選項
      // 如果需要前進(jìn)后退按鈕
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
       slidesPerView: 3, // 顯示幾個
       height:100, // swiperlide 高度
    });
  },

slidesPerView: 3, // 顯示幾個 height:100, // swiperlide 高度。更多其他的自定義輪播設(shè)置可以參照官方 API

也可在 watch 監(jiān)聽數(shù)組 skuImageList 是否發(fā)生變化利用 thsi.$nextTick() 觸發(fā)頁面更新

watch: {
    skuImageList() {
      //保證數(shù)據(jù)發(fā)生修改,頁面結(jié)構(gòu)再次渲染完畢。在初始化Swiper實例
      this.$nextTick(() => {
        //初始化Swiper類的實例
        var mySwiper = new Swiper(".swiper-container", {
          //設(shè)置輪播圖防線
          direction: "horizontal",
          // loop:true,
          // 如果需要前進(jìn)后退按鈕
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          //展示區(qū)域同時展示三張圖片
          slidesPerView: 2,
        });
      });
    },

樣式：--swiper-navigation-size: 20px;/* 設(shè)置按鈕大小 */

<style lang="scss" scoped>
img {
  width: 50px;
  height: 75px;
}
.swiper-container {
  width: 350px;
  --swiper-navigation-size: 20px;/* 設(shè)置按鈕大小 */
}
.swiper-slide{
  left: 30px;
}
 
</style>

更多的其他設(shè)置可以參照 api 中文api - Swiper中文網(wǎng)