vue使用Swiper

Swiper中文网   

具体参考   Swiper使用方法

1、安装swiper5

npm i swiper@5

2、main.js中引入swiper及其样式

import Swiper from 'swiper'
​​​​​​​import 'swiper/css/swiper.min.css'

 3、在vue中使用（图片数据是从后端获取的，放在vuex中，下面代码只是这个组件的代码，仅供参考）

<template>
  <div class="list-container">
    <div class="sortList clearfix">
      <div class="center">
        <!--banner轮播-->
        <div class="swiper-container banner-swiper" id="mySwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="banner in bannerList"
              :key="banner.id"
            >
              <img :src="banner.imgUrl" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ListContainer',
  computed: {
    ...mapState('home', ['bannerList'])
  },
  mounted () {
    // 组件一挂载完就分发一个action用于请求轮播图数据
    this.$store.dispatch('home/getBannerList')
  },
  watch: {
    bannerList () {
      // bannerList函数若执行了，证明数据绝对变化了，但页面DOM还没有好
      this.$nextTick(() => {
        // $nextTick指定的回调若执行了，证明页面DOM结构更新完毕了
        /* eslint-disable no-new */
        new Swiper('.banner-swiper', {
          slidesPerView: 1, // 同时展示几屏
          spaceBetween: 30, // 两屏之间的间隔
          loop: true, // 循环轮播
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.list-container {
  width: 1200px;
  margin: 0 auto;

  .sortList {
    height: 464px;
    padding-left: 210px;

    .center {
      box-sizing: border-box;
      width: 740px;
      height: 100%;
      padding: 5px;
      float: left;
    }
  }
}
</style>