7、vue-awesome-swiper页面跳转

7、vue-awesome-swiper页面跳转

<template>
    <swiper :options='swiperOption' ref="mySwiper" class='swiper-container swiper-no-swiping'>
        <swiper-slide>
              <div class='res1' @click='changeIndex(1)'></div>
                
        </swiper-slide>
        <swiper-slide>
            <one></one>    
        </swiper-slide>
        <swiper-slide>
            <two></two>
        </swiper-slide>
        <swiper-slide><three></three></swiper-slide>
        <!-- <swiper-slide><four></four></swiper-slide> -->
        <div class='swiper-pagination' slot='pagination'></div>
    </swiper>
</template>
export default {
  name: '',
  data () {
    return {
      swiperOption: {
        direction: 'vertical',
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        lazyLoading : true,
        onSlideChangeEnd: swiper => {
          this.page = swiper.realIndex + 1
          this.index = swiper.realIndex
          alert(123)
        },
        fade:{crossFade:true},
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      pathName:this.$route.name
    }
  },
    components: { 
    swiper,
    swiperSlide,
    one,
    two,
    three

    
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    },
    change (swiper){
        console.log(swiper)
    }
  },
  // 测试

  methods:{
    //点击跳到对应的index页面
    changeIndex(index){
      console.log(this.$refs.mySwiper.swiper)
      this.$refs.mySwiper.swiper.slideTo(index, 1000, true);//切换到第一个slide,速度为1秒
      
    }
  }
}

posted @ 2018-09-18 22:09 飞刀还问情 阅读(...) 评论(...) 编辑 收藏

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值