1. 程式人生 > >vue-awesome-swiper 自定義分頁器使用

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的話樣式是對全域性生效的,所以要注意樣式的命名。