Swiper中文论坛

标题: vue项目使用3D方块效果怎么给它加监听 [打印本页]
作者: 蒋跑跑跑~    时间: 2018-1-30 16:23
标题: vue项目使用3D方块效果怎么给它加监听
  1. <template>
  2.         <md-card>
  3.             <md-card-media class="swiper-inner">
  4.                 <swiper :options="swiperOption" >
  5.                     <swiper-slide v-for="i in 4" :key="i" > </swiper-slide>
  6.                 </swiper>
  7.             </md-card-media>
  8.         </md-card>
  9. </template>
复制代码
  1.    data() {
  2.       return {
  3.         swiperOption: {
  4.           effect: 'cube',
  5.           grabCursor: true,
  6.           observeParents:true,
  7.           cubeEffect: {
  8.             shadow: true,
  9.             slideShadows: true,
  10.             shadowOffset: 20,
  11.             shadowScale: 0.94
  12.           },
  13.           pagination: {
  14.             el: '.swiper-pagination'
  15.           }
  16.         }
  17.       }
  18.     },
复制代码
vue项目使用3D方块效果怎么给它加监听，知道当前swiper-slide的index,求各位大神告知，谢谢

y1.png (27.19 KB, 下载次数: 92)

y1.png

y2.png (19.48 KB, 下载次数: 85)

y2.png
作者: 蒋跑跑跑~    时间: 2018-1-31 08:47
自问自答
  1.     data() {
  2.       return {
  3.         swiperOption: {
  4.           effect: 'cube',
  5.           grabCursor: true,
  6.           observeParents:true,
  7.           cubeEffect: {
  8.             shadow: true,
  9.             slideShadows: true,
  10.             shadowOffset: 20,
  11.             shadowScale: 0.94
  12.           },
  13.           runCallbacksOnInit : false,//初始化时不触发slideChange
  14.           on:{
  15.             slideChangeTransitionEnd: function(){
  16.               localStorage.setItem('bannerIndex',this.activeIndex)
  17.             },
  18.           }
  19.         },
  20.       }
  21.     },
复制代码




欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2