由于項(xiàng)目中要求有左右滑動(dòng)切換賬號(hào)信息的需求，所以思考過(guò)后決定用swiper插件實(shí)現(xiàn)這個(gè)交互。
swiper文檔地址：https://www.swiper.com.cn/usage/index.html
一 、安裝

npm install swiper --save-dev

二、在使用到的頁(yè)面引入

<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, // 循環(huán)模式選項(xiàng)
      // 如果需要分頁(yè)器
      pagination: {
        el: ".swiper-pagination",
      },
      slidesPerView: 3,
      centeredSlides: true,
      observer: true, //修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
      observeParents: true, //修改swiper的父元素時(shí)，自動(dòng)初始化swiper
      on: {
        //  2. 在滾動(dòng)事件中通過(guò)上面保存的swiper元素獲取當(dāng)前頁(yè)索引,可以打印一下c_swiper看一下內(nèi)部屬性
        slideChange: () => {
          console.log("輪播圖滾動(dòng)事件  --->", c_swiper[0].swiper.activeIndex);
          console.log("此處添加切換時(shí)要做的操作")
        },
      },
    });
  },
</script>

三、效果

84e209aac60b0643ef34b39814eeb0d.png

e28b7816762b7134097470c3bc233c7.png