vue中使用轮播插件

在vue2中使用轮播插件vue-awesome-swiper，功能包括自动轮播，点击查看大图, 查看大图功能使用的是element-ui中的<e-image/>
下面来安装使用

1.安装对应的版本

在vue2中需要安装对应的版本，在安装vue-awesome-swiper的同时也需要安装swiper组件。
对应版本如下：
vue-awesome-swiper@3.1.3
swiper@4.0.7

npm install vue-awesome-swiper@3.1.3 --save
npm install swper@4.0.7 --save
or
cnpm install vue-awesome-swiper@3.1.3 --save
cnpm install swper@4.0.7 --save

引用轮播组件

index.vue

import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

下面是index.vue的使用和配置

<template>
   <div>
        <swiper
            class="swiper"
            ref="mySwiper"
            :options="swiperOption"
            v-if="productList.length > 1"
          >
            <swiper-slide
              v-for="(item, index) in productList"
              :key="index"
            >
              <a
                target="_blank"
                :href="item.url"
              >
                <div class="honorShow">
                  <div class="pic">
                    <img
                      :src="item.covers[0].path"
                      alt=""
                      srcset=""
                    >
                  </div>
                </div>
              </a>
            </swiper-slide>
            <!-- <div
              class="swiper-pagination"
              slot="pagination"
            />
            <div
              class="swiper-button-prev"
              slot="button-prev"
            />
            <div
              class="swiper-button-next"
              slot="button-next"
            /> -->
          </swiper>
          <imageView
            v-if="imgViewerVisible"
            :on-close="closeImgViewer"
            :url-list="prosrcList1"
            :initial-index="initNum"
           />
   </div>
</template>

<script type="text/javascript">
import {
  getHomeProduct
} from '@/api/home'
import imageView from 'element-ui/packages/image/src/image-viewer'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

export default {
  data() {
    const that = this
    return {
      initNum: 0,
      swiperOption: {
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        slidesPerView: 5,
        spaceBetween: 5,
        slidesPerGroup: 5,
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        on: {
          click: function () {
            that.imgViewerVisible = true
            const index = this.clickedIndex - this.activeIndex + this.realIndex
            that.initNum = index
          }
        }
      },
    }
  },
  mounted() {
    // 初始化完成
    this.getHomeProduct()
  },
  methods: {
      getHomeProduct() {
      const data = {
        page: 1,
        limit: 5
      }
      getHomeProduct(data).then((res) => {
        this.productList = res.data
        console.log('===')
        const arr = []
        this.productList.map((res) => {
          arr.push(res.covers[0].path)
          return 0
        })
        this.prosrcList1 = arr
      })
    },
  }
}
</script>

image.png

写完之后是这个样式，因为不需要左右按钮和下面的小点点，就注释了
上面就是整个轮播的代码，具体的样式需要自己去调整，使用:deep()或者/deep/

点击查看大图

至于查看大图，就是使用了element-ui中<e-image/>组件

可以直接使用e-image组件，也可以跟我这样直接去引用node包中查找element-ui下面的packages包中的image-viewer.vue

swiperOption: {
        observer: true, // 修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, // 修改swiper的父元素时，自动初始化swiper
        slidesPerView: 5,
        spaceBetween: 5,
        slidesPerGroup: 5,
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false
        },
        on: {
          click: function () {
            that.imgViewerVisible = true
            const index = this.clickedIndex - this.activeIndex + this.realIndex
            that.initNum = index
          }
        }
      },

需要去添加slidesPerGroup轮播组，就是slidesPerView是一组分几个，slidesPerGroup是分几组，这样就可以通过const index = this.clickedIndex - this.activeIndex + this.realIndex，求得当前点击的下标

嗯，还有一个问题就是，image-viewer.vue中的:url-list="prosrcList1"对象需要传入的格式如下

imgs: [
  'aaa.png',
  'bbb.png',
  'ccc.png'
]

差不多内容就是这样，后续有什么需要修改的，会再次更新~~~