安装
# npm install vue-awesome-swiper --save
# cnpm install vue-awesome-swiper --save
main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
在组建中引入
import { swiper, swiperSlide ,mdCardMedia ,mdCard} from 'vue-awesome-swiper'
components: { Badge, Popup, Toast, XDialog,XCircle,Confirm,Alert,headerBox,bannerBox,Tab ,TabItem,Scroller,Divider,Loading,swiper, swiperSlide ,mdCardMedia ,mdCard},
在data()中初始化
swiperOption: {
effect: 'cube',
autoplay:false,
grabCursor: true,
observeParents:true,
hashNavigation: true,
cubeEffect: {
shadow: true,
slideShadows: true,
shadowOffset: 20,
shadowScale: 0.94
},
observer:true,
on:{
/**子元素切换后执行的回调**/
transitionEnd:function () {
vm.tabItem = this.activeIndex
// localStorage.setItem('bannerIndex',this.activeIndex)
}
}
},
界面显示
<div>
<div class="swiper-inner">
<swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="i in 4" :key="i" > </swiper-slide>
</swiper>
</div>
</div>
观察子元素的变化,以便于点击外部按钮直接切换子元素
computed: {
swiper() {
return this.$refs.mySwiper.swiper
}
},
点击切换子元素
this.swiper.slideTo(this.tabItem, 1000, true);