vue中使用vue-awesome-swiper

Posted 2023-05-17

参考技术A 首先说下我们的需求，移动端，默认展示一张完整的图片，第二张等比例缩小展示一部分

等比例缩小样式

vue-awesome-swiper的使用

这是swiper专门为了vue开发出的插件，参数基本一样

https://www.swiper.com.cn/

 

vue中使用

npm install vue-awesome-swiper

组件中引入

  import { Swiper, SwiperSlide } from ‘vue-awesome-swiper‘
  import ‘swiper/css/swiper.css‘

 

            <swiper
              ref="carouselSwiper"
              :options="carouselSwiperOptions"
              v-if="carouselList.length"
            >
              <swiper-slide
                v-for="(item, index) in carouselList"
                :key="index"
              >
                <img class="carouselImg" :src="item.picPath" alt="carousel图片">
                <div class="swiper-slide-title">{{item.title}}</div>
                <div class="swiper-title-bgc"></div>
              </swiper-slide>
              <div class="swiper-pagination"  slot="pagination"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </swiper>

说明：

carouselSwiperOptions是配置文件

v-if="carouselList.length" 添加这行是为了参数有值以后，才调用swiper，不然会有其他问题（比如展示的不是第一条数据）

  // eslint-disable-next-line no-unused-vars
  let Vm = null

定义在最外面

// 轮播图swiper配置
        carouselSwiperOptions: {
          slidesPerView: 1,
          spaceBetween: 30,
          loop: true,
          initialSlide: 0,
          // 自动播放
          autoplay: {
            delay: 6000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          },
          // 滑动速度
          speed: 1500,
          // horizontal
          direction: ‘horizontal‘,
          observer: true,
          pagination: {
            el: ‘.swiper-pagination‘,
            clickable: true
          },
          navigation: {
            nextEl: ‘.swiper-button-next‘,
            prevEl: ‘.swiper-button-prev‘
          },
          on: {
            click: function () {
              // 上一页、下一页点击和点击图片都会触发click方法，
              // 不过上一页、下一页点击时，clickedIndex为undefined
              if (this.clickedIndex === undefined) {
                return
              }
              //  realIndex当前点击的图在列表的index值
              const realIndex = this.realIndex
              // 要在最外层定义Vm，直接使用this访问不到vue实例
              Vm.swiperClick2(realIndex)
            }
          }
        },