vue项目中使用swiper

由于项目中要求有左右滑动切换账号信息的需求，所以思考过后决定用swiper插件实现这个交互。
swiper文档地址：https://www.swiper.com.cn/usage/index.html
一 、安装

npm install swiper --save-dev

二、在使用到的页面引入

<template>
<div class="swiper-container">
            <div class="swiper-wrapper">
              <div
                v-for="(el,index) in arrItem"
                :key="index"
                class="swiper-slide common_flex"
              >
                <img
                  class="img"
                  v-if="el.avatarUrl"
                  :src="el.avatarUrl"
                >
                <div
                  class="swiper-slide-name"
                  v-show="el.relation"
                >{{el.relation}}</div>
              </div>
            </div>
 </div>
</template>
<script>
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
const c_swiper = document.getElementsByClassName("swiper-container");
mounted() {
    new Swiper(".swiper-container", {
      loop: false, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },
      slidesPerView: 3,
      centeredSlides: true,
      observer: true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents: true, //修改swiper的父元素时，自动初始化swiper
      on: {
        //  2. 在滚动事件中通过上面保存的swiper元素获取当前页索引,可以打印一下c_swiper看一下内部属性
        slideChange: () => {
          console.log("轮播图滚动事件  --->", c_swiper[0].swiper.activeIndex);
          console.log("此处添加切换时要做的操作")
        },
      },
    });
  },
</script>

三、效果

84e209aac60b0643ef34b39814eeb0d.png e28b7816762b7134097470c3bc233c7.png