vue项目中使用swiper遇到的坑

451 阅读1分钟

一、在vue项目中安装swiper

	npm install swiper -S

二、在main.js中引入swiper.css

	import Vue from 'vue';
	import "swiper/swiper.min.css"

三、在需要使用swiper的组件中引入swiper ,swiper必须放到mounted里 否在无效

<script>
import Swiper from 'swiper';
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
     new Swiper ('.swiper-container', {
    loop: true,
    // 如果需要分页器
    pagination: '.swiper-pagination',
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    // 如果需要滚动条
    scrollbar: '.swiper-scrollbar',
  })        
  }
}
</script>

四、在需要的