vue-awesome-swiper 自定义分页器使用

首先需要引入swiper组件，可以全局注册，也可以在页面内注册，具体方法见官网

我这里只在本页面中进行了注册，代码如下，你可以填充需要的数据

<template>
  <div>
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide class="swiper-slide" v-for="(activity,index) in activities" :key="index">
        <div class="activity-info">
          <a class="cover">
            <img :src="activity.img">
          </a>
        </div>
      </swiper-slide>
      <!-- Add Pagination -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import {swiper, swiperSlide} from 'vue-awesome-swiper'
export default {
  data () {
    return {
      swiperOption: {
        spaceBetween: 5,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
          bulletClass: 'my-bullet',
          bulletActiveClass: 'my-bullet-active'
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
</script>

<style lang="stylus">
.my-bullet
  border-radius .02rem
  width .04rem
  height .04rem
  margin 0 .03rem
  display inline-block
  background rgba(0,0,0,0.20)
.my-bullet-active
  background #3CDBC0
  width .16rem
</style>

这里的bulletClass: 'my-bullet',bulletActiveClass: 'my-bullet-active'对下面的小点点的样式进行了自定义。
最重要的就是<style lang="stylus">，一定不要加scoped，另外去掉scoped的话样式是对全局生效的，所以要注意样式的命名。