7、vue-awesome-swiper页面跳转

最新推荐文章于 2023-01-12 09:09:28 发布

飞刀还问情

最新推荐文章于 2023-01-12 09:09:28 发布

阅读量673

点赞数

CC 4.0 BY-SA版权

分类专栏：前端经验文章标签： vue-awesome-swiper页面跳转

本文链接：https://blog.youkuaiyun.com/qq_22225239/article/details/89484743

前端经验专栏收录该内容

10 篇文章

订阅专栏

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 飞刀还问情阅读(...) 评论(...) 编辑收藏