vue2：swiper vue-awesome-swiper的使用方法(细节版)

swiper文档

https://codelife.cc/vue3-video-play/guide/install.html#props

安装（指定版本）

//直接安装版本3即可，自动会选择3.1.3版本
cnpm i vue-awesome-swiper@3 -S
//或者手动指定
cnpm i vue-awesome-swiper@3.1.3 -S

全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
//引入样式
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */)

页面调用示例 —— 完整代码

<template>
  <div class="container">
    <div class="home">
      <!-- 轮播图 -->
      <!-- @slideChange="slideChange" 这是当前轮播图显示的主图变化是触发的事件  可以通过 $ref获取到当前轮播图swiper 然后通过this.$refs.mySwiper.swiper.realIndex 获取到轮播图当前展示项的真实下标 进而得到当前项的数据 -->
      <swiper ref="mySwiper" @slideChange="slideChange" :options="option" class="home-medical-box">
        <swiper-slide
          class="benefitBox"
          v-for="(item, index) in medicalInfo"
          :key="index"
        >
          <div class="home-medical-item">
            <img
              class="medical-img"
              src="@/assets/images/home-medical.png"
              alt="小妙家庭医生"
            />
            <div class="medical-card">
              <div class="card-header">
                <div class="card-header-left">
                  <span class="medical-name">{{ item.medicalName }}</span>
                  <span class="medical-type">{{ item.medicalType }}</span>
                </div>
                <div class="card-header-right">
                  <span class="evaluation">好评率:</span>
                  <span class="evaluation-info">{{
                    item.FavorableRating
                  }}</span>
                </div>
              </div>
              <div class="card-body">
                <p class="card-content">
                  擅长:&nbsp&nbsp&nbsp&nbsp{{ item.goodAt }}
                </p>
              </div>
              <div class="card-footer">
                <div></div>
                <span v-for="(item2, index2) in item.tabs" :key="index2">{{
                  item2
                }}</span>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <!-- 底部立即签约按钮 -->
      <div class="home-bottom">
        <van-button type="default" size="large" block @click="signUpFn"
          >立即签约</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// 引入插件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'home',
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    let _this = this
    let realIndex
    return {
      option: {
        slidesPerView: 1.2, //显示slide的数量
        centeredSlides: true, //居中显示
        loop: true, //循环
        initialSlide: 0, //初始索引
        spaceBetween: 16, //间距
        on: {
          click: function () {
            // 获取点击的索引.
            realIndex = this.realIndex
            // 此处可自定义点击事件,注意此处this指向swiper,定义_this
          },
        },
      },
      // 家医列表数据
      medicalInfo: [
        {
          id: 1,
          medicalName: '王雪岩',
          medicalType: '全科医生',
          FavorableRating: '99%',
          goodAt:
            '治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症，治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症',
          tabs: ['#专业', '#人很温柔', '#水平高'].slice(0, 3), // 只要三个标签
        },
        {
          id: 2,
          medicalName: '小明',
          medicalType: '骨科医生',
          FavorableRating: '95%',
          goodAt:
            '治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症，治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症',
          tabs: ['#专业', '漂亮', '#人很温柔', '#水平高', '好看'].slice(0, 3), // 只要三个标签
        },
        {
          id: 3,
          medicalName: '小白',
          medicalType: '内科医生',
          FavorableRating: '99%',
          goodAt:
            '治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症，治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症',
          tabs: ['长得白', '颜值高', '#专业', '#人很温柔', '#水平高'].slice(
            0,
            3
          ), // 只要三个标签
        },
        {
          id: 4,
          medicalName: '小黑',
          medicalType: '牙科医生',
          FavorableRating: '100%',
          goodAt:
            '治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症，治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症',
          tabs: ['长得黑', '#专业', '#人很温柔', '#水平高', '长得好看'].slice(
            0,
            3
          ), // 只要三个标签
        },
        {
          id: 5,
          medicalName: '小黑',
          medicalType: '牙科医生',
          FavorableRating: '100%',
          goodAt:
            '治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症，治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症治疗脑出血、颅脑损伤、中风后遗症以及中医治疗颈椎病、各种疑难杂症',
          tabs: ['长得黑', '#专业', '#人很温柔', '#水平高', '长得好看'].slice(
            0,
            3
          ), // 只要三个标签
        },
      ],
      activeIndex:0 // 轮播图数据列表下标
    }
  },
  created() {
  },
  methods: {
    // 立即签约点击事件
    signUpFn() {
     let activeItem =  this.medicalInfo[this.activeIndex]
      console.log('立即签约',activeItem) //  获取到当前展示项的数据
    },
    // 轮播图滑动事件
    slideChange(){
        this.activeIndex = this.$refs.mySwiper.swiper.realIndex
        console.log('阿啦啦啦啦啦',this.$refs.mySwiper.swiper.realIndex)
        console.log(轮播图当前展示项的真实下标,this.activeIndex)
    }
  },
}
</script>
<style lang="less" scoped>
/deep/ .van-button--default {
  height: 88px;
  background: linear-gradient(315deg, #6040f7 0%, #9184ff 100%);
  color: #fff;
  font-size: 16px;
}
.container {
  min-height: 100vh;
  background-color: #f5f6fa;
  padding-top: 40px;

  .home {
    width: 100%;
  }
  .home-medical-box {
    .home-medical-item {
      position: relative;
      height: 451px;
      .medical-img {
        width: 311px;
        height: 255px;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
      }
      .medical-card {
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 311px;
        height: 210px;
        padding: 24px 17px 20px 16px;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        z-index: 99;

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .card-header-left {
            .medical-name {
              font-size: 18px;
              font-weight: 500;
              color: #333;
              margin-right: 8px;
            }
            .medical-type {
              background: #edf7ff;
              border-radius: 2px;
              padding: 2px;
              border: 1px solid rgba(54, 162, 245, 0.5);
              color: #36a2f5;
              font-size: 12px;
            }
          }
          .card-header-right {
            font-size: 14px;
            margin-top: 2px;
            .evaluation {
              color: #666;
            }
            .evaluation-info {
              color: #6236ff;
            }
          }
        }
        .card-body {
          margin-top: 16px;
          height: 88px;
          line-height: 22px;
          color: #999;
          font-size: 14px;

          .card-content {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
          }
        }
        .card-footer {
          margin-top: 26px;
          font-size: 14px;
          color: #6236ff;
          span {
            padding: 4px 8px;
            background: #f6f3ff;
            border-radius: 4px;
          }
        }
      }
    }
  }
  .home-bottom {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 88px;
    overflow: hidden; // 清除浮动
  }
}
</style>

效果

最终效果

第四步：配置options。

查看github的vue-awesome-swiper的官方示例：
https://v1.github.surmon.me/vue-awesome-swiper/