vue中使用vue-awesome-swiper实现轮播记录

vue-awesome-swiper安装

npm install vue-awesome-swiper --save

安装好之后，在main.js文件中导入

import VueAweSomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'

Vue.use(VueAweSomeSwiper)

然后在组件中就可以使用了
dom

<template>
  <div class="container-swiper">
    <swiper :options="swiperOption" v-if="showSwiper">
      <swiper-slide v-for="(item, index) of banner" :key="index">
          <a :href="item.link" target="_blank" rel="noopener noreferrer">
            <img class="swiper-img" :src="item.image_url"/>
          </a>
      </swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>

js

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  data () {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 5000
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          // 自定义分页器， bulletClass 是常规的分页名字， bulletActiveClass是active时候的名字
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        }
      },
      banner: []
    }
  },
  components: {
    swiper,
    swiperSlide
   },

  computed: {
    // 这里计算数据的长度，以此来判断是否显示，这个貌似要必写
     showSwiper () {
       return this.banner.length
     }
   },
  methods: {
    // 首页信息
    Infor () {
      this.$http.post('/index/wwwIndex').then((result) => {
        this.banner = result.data.data.pc_www_top_banner.img_lists
      })
    }
  }
</script>

css

//  这里去掉了scoped ，而且一定要去掉，本人亲自尝试，就因为这点，来来回回折腾了快一天
<style lang='scss' >
.container-swiper{
  width: 100%;
  height: 2.11rem;
  overflow: hidden;
}
.swiper-container{
  height: 2.11rem;
  width: 100%;
  margin: 0px auto;
}
.swiper-slide a{
  display: block;
}
.swiper-slide a img{
  width: 100%;
  height: 2.11rem;
}
.swiper-pagination{
  height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.swiper-pagination .my-bullet{
  border-radius: 50%;
  width: 4px;
  height: 4px;
  margin: 4px;
  background: #000000;
  display: block;
}
.swiper-pagination .my-bullet-active{
  display: block;
  background: #000000;
  width: 10px;
  height: 4px;
  border-radius: 2px;
}
</style>

最重要的就是，一定不要加scoped，另外去掉scoped的话样式是对全局生效的，所以要注意自定义样式的命名

问题1：

有时候点击分页器，轮播就不能继续了，根本原因是是少了一个属性

autoplay: {
  delay: 5000,
//加上这句就好了
  disableOnInteraction: false
},