快捷導(dǎo)航

swiper在vue中的簡(jiǎn)單使用方法

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

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

本次使用的是 swiper5，swiper 不同版本在使用的過(guò)程會(huì)有一些差別

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

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

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部分

說(shuō)明：本次使用swiper5，因?yàn)槭菑姆?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)模式選項(xiàng)
      // 如果需要前進(jìn)后退按鈕
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
       slidesPerView: 3, // 顯示幾個(gè)
       height:100, // swiperlide 高度
    });
  },

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

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

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