vue-awesome-swiper 自定義分頁器使用
阿新 • • 發佈:2019-02-18
首先需要引入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的話樣式是對全域性生效的,所以要注意樣式的命名。