vue中使用swiper

版权声明：转载请注明出处。 https://blog.csdn.net/zeroyulong/article/details/83585541

一、集成swiper

npm install swiper

二、main.js中引入公共样式

import 'swiper/dist/css/swiper.min.css'

三、页面中调用，在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里（若想要从后台请求图片放上去 new Swiper要写在网络请求成功的回调函数，否则无法出来数据。）

<template>
     <div class="swiper-container">
	    <div class="swiper-wrapper">
	      <div class="swiper-slide">
	        <img src="../assets/logo.png" alt="">
	      </div>
	      <div class="swiper-slide">
	        <img src="../assets/logo.png" alt="">
	      </div>
	      <div class="swiper-slide">
	        <img src="../assets/logo.png" alt="">
	      </div>
	    </div>
	  </div>
</template>
<script>
import Swiper from 'swiper';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted:function(){
	var mySwiper = new Swiper('.swiper-container', {
          autoplay:true,
          loop:true
    })
  },
}
</script>