使用vue-awesome-swiper滑块插件

Posted 2020-10-27 小白不白

基于之前写的vue2.0 + vue-cli + webpack 搭建项目

1.进入项目目录，安装swiper

npm install vue-awesome-swiper --save

2.引入资源（main.js文件)

import VueAwesomeSwiper from ‘vue-awesome-swiper‘
Vue.use(VueAwesomeSwiper)

3.编辑组件(HelloWorld.vue文件或其他 .vue文件)

<template>
<swiper :options="swiperOption" ref="mySwiper">
 <!-- slides -->
 <swiper-slide>I‘m Slide 1</swiper-slide>
 <swiper-slide>I‘m Slide 2</swiper-slide>
 <swiper-slide>I‘m Slide 3</swiper-slide>
 <swiper-slide>I‘m Slide 4</swiper-slide>
 <swiper-slide>I‘m Slide 5</swiper-slide>
 <swiper-slide>I‘m Slide 6</swiper-slide>
 <swiper-slide>I‘m Slide 7</swiper-slide>
 <!-- Optional controls -->
 <div class="swiper-pagination"  slot="pagination"></div>
 <div class="swiper-button-prev" slot="button-prev"></div>
 <div class="swiper-button-next" slot="button-next"></div>
 <div class="swiper-scrollbar"   slot="scrollbar"></div>
</swiper>
</template>
<script>
import { swiper, swiperSlide } from ‘vue-awesome-swiper‘
export default {
  name: ‘carrousel‘,
 data() {
   return {
     swiperOption: {
       
       // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true

       notNextTick: true,
       // swiper configs 所有的配置同swiper官方api配置
       autoplay: 3000,
       // direction : ‘vertical‘,
       effect:"coverflow",
       grabCursor : true,
       setWrapperSize :true,
       // autoHeight: true,
       // paginationType:"bullets",
       pagination : ‘.swiper-pagination‘,
       paginationClickable :true,
       prevButton:‘.swiper-button-prev‘,
       nextButton:‘.swiper-button-next‘,
       // scrollbar:‘.swiper-scrollbar‘,
       mousewheelControl : true,
       observeParents:true,
      
     }
   }
 },components: {
 swiper,
 swiperSlide
},
 
 // 如果你需要得到当前的swiper对象来做一些事情，你可以像下面这样定义一个方法属性来获取当前的swiper对象，同时notNextTick必须为true
 computed: {
   swiper() {
     return this.$refs.mySwiper.swiper
   }
 },
 mounted() {
   
   // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
   // console.log(‘this is current swiper instance object‘, this.swiper)
   // this.swiper.slideTo(3, 1000, false)
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.swiper-slide{
height:200px;
float: left;
background:red;
}

</style>