swiper下载

yarn add swiper

引入

import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'

使用

1.请求数据

    getBanner() {
      axios.get(url.banner).then(res => {
        this.bannerLists = res.data.lists
      })
    }

2.挂载到页面上

      <swipe :lists="bannerLists" name="swipe.vue" v-if="bannerLists"></swipe>

3.使用
html

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swp-page swiper-slide" v-for="list in lists">
        <a class="js-no-follow" :href="list.clickUrl">
          <img class="goods-main-photo fadeIn" :src="list.img">
        </a>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

js

  mounted() {
    this.init()
  },
  methods: {
    init() {
      new Swiper('.swiper-container', {
        autoplay: true,
        pagination: '.swiper-pagination'
      })
    }
  }