//dom
<div?class="swiper-pagination"?slot="pagination"></div>
//引用
import?{?Swiper,?SwiperSlide,?directive?}?from?'vue-awesome-swiper';
import?'swiper/swiper-bundle.css'
import?Swiper2,?{Navigation,?Pagination}?from?'swiper';?// 這行代碼很關(guān)鍵
Swiper2.use([Navigation,?Pagination]); // 這行代碼很關(guān)鍵
// 樣式
.swiper-container?/deep/?.swiper-pagination-bullet{
??????background:?red;
??????height:?10px;
??????width:?10px;
??????opacity:?1;
}
.swiper-container?/deep/?.swiper-pagination-bullet-active{
??????background-color:?#ffffff;
}
全部代碼
<template>
????<!--?<div?class="commodity">
????????<div?class="container">?-->
????<swiper?ref="mySwiper"?id="parent"?:options="swiperOptions">
????????<swiper-slide?v-for="(item,?index)?in?commodity"?:data-index="index"?:key="index">
????????????<img?class='swiImg'?:src='item'?/>
????????</swiper-slide>
????????<!--?//滾動條?-->
????????<!--?<div?class="swiper-scrollbar"?></div>?-->
????????<!--?//下一頁?-->
????????<div?class="swiper-button-next"?@click="slideNext()"?slot="button-next"></div>
????????<!--?//上一頁?-->
????????<div?class="swiper-button-prev"?@click="slidePrev()"?slot="button-prev"></div>
????????<div?class="swiper-pagination"?slot="pagination"></div>
????</swiper>
????<!--?<span?class='swiText'?v-if='commodity'>{{imgIndex}}/{{commodity.length}}</span>?-->
????<!--?</div>
????</div>?-->
</template>
<script>
import?{?Swiper,?SwiperSlide,?directive?}?from?'vue-awesome-swiper';
import?'swiper/swiper-bundle.css'
import?Swiper2,?{Navigation,?Pagination}?from?'swiper';
Swiper2.use([Navigation,?Pagination]);
export?default?{
????data()?{
????????const?that?=?this;
????????return?{
????????????commodity:?[
????????????????"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",
????????????????"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",
????????????????"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/911a7002e11608fb581fffcde05d5257.jpg",
????????????????"https://boweisou.oss-cn-shenzhen.aliyuncs.com/yy/images/2_1536049430.jpg",
????????????],
????????????imgIndex:?1,
????????????swiperOptions:?{
????????????????loop:?true,
????????????????pagination:?{
????????????????????el:?'.swiper-pagination',
????????????????????clickable:?true,
????????????????},
????????????????//?Some?Swiper?option/callback...
????????????}
????????}
????},
????components:?{
????????Swiper,
????????SwiperSlide
????},
????computed:?{
????????swiper()?{
????????????return?this.$refs.mySwiper.$swiper
????????}
????},
????mounted()?{
????????//?this.swiper.slideTo(3,?1000,?false)
????},
????methods:?{
????????slideNext()?{
????????????this.swiper.slideNext()
????????},
????????slidePrev()?{
????????????this.swiper.slidePrev()
????????},
????}
}
</script>
<style?lang="less"?scoped>
.swiImg?{
????width:?100%;
????height:?400px;
}
.item?{
????width:?10px;
????height:?10px;
????background:?red;
}
.swiper-container?{
????//?--swiper-theme-color:?#ff6600;
????//?--swiper-pagination-color:?#00ff33;?/*?兩種都可以?*/
}
.swiper-container?/deep/?.swiper-pagination-bullet{
??????background:?red;
??????height:?10px;
??????width:?10px;
??????opacity:?1;
}
.swiper-container?/deep/?.swiper-pagination-bullet-active{
??????background-color:?#ffffff;
}
</style>
