原文鏈接：https://www.3mooc.com/front/articleinfo/160
vue輪播插件vue-awesome-swiper-來(lái)自于三人行慕課
1. npm安裝插件
npm?install?vue-awesome-swiper?-S
2. 引入插件
a>main.js中
import?Vue?from?'vue'
import?vueSwiper?from?'vue-awesome-swiper'
import?'swiper/dist/css/swiper.css'
Vue.use(vueSwiper);
b>單獨(dú)的組件引入
import?{?swiper,?swiperSlide?}?from?"vue-awesome-swiper";
import?"swiper/dist/css/swiper.css";
components:?{
??swiper,
??swiperSlide
}
3. template中使用
<swiper?:options="swiperOption"?class="swiper-wrap"??ref="mySwiper"?v-if="banner.length!=0">
??<swiper-slide?v-for="(item,index)?in?banner"?:key="index"?>
????<img?:src="item.image"?alt=""?/>
??</swiper-slide>
??<!--?常見(jiàn)的小圓點(diǎn)?-->
??<div?class="swiper-pagination"??v-for="(item,index)?in?banner"?:key="index"?slot="pagination"?></div>
</swiper>
<!--?顯示數(shù)字?-->
<div?class="number">{{imgIndex}}/{{detailimages.length}}</div>
4. data配置
data()?{
????const?that?=?this;
????return?{
??????imgIndex:?1,
??????swiperOption:?{
????????//是一個(gè)組件自有屬性甜滨，如果notNextTick設(shè)置為true洋措，組件則不會(huì)通過(guò)NextTick來(lái)實(shí)例化swiper，也就意味著你可以在第一時(shí)間獲取到swiper對(duì)象镐躲，假如你需要?jiǎng)偧虞d遍使用獲取swiper對(duì)象來(lái)做什么事，那么這個(gè)屬性一定要是true
????????notNextTick:?true,
????????//循環(huán)
????????loop:?true,
????????//設(shè)定初始化時(shí)slide的索引
????????initialSlide:?0,
????????//自動(dòng)播放
????????autoplay:?{
??????????delay:?1500,
??????????stopOnLastSlide:?false,
??????????/*?觸摸滑動(dòng)后是否繼續(xù)輪播?*/
??????????disableOnInteraction:?false
????????},
????????//滑動(dòng)速度
????????speed:?800,
????????//滑動(dòng)方向
????????direction:?"horizontal",
????????//小手掌抓取滑動(dòng)
????????grabCursor:?true,
????????on:?{
??????????//滑動(dòng)之后回調(diào)函數(shù)
??????????slideChangeTransitionStart:?function()?{
????????????/*?realIndex為滾動(dòng)到當(dāng)前的slide索引值?*/
????????????that.imgIndex=?this.realIndex?-?1;
??????????},
????????},
????????//分頁(yè)器設(shè)置
????????pagination:?{
??????????el:?".swiper-pagination",
??????????clickable:?true,
??????????type:?"bullets"
????????}
??????}
???};
},
