vue中使用swiper插件

一、轮播图中由于默认自动复制增加了一张图，所有在做轮播图的点击事件时不能简单的用官方文档，应使用computed方法来定义。

 computed: {

 swiper() {

        return this.$refs.mySwiper.swiper;

      },

      swiperOption_() {

 let that = this

        let option = {

          preventClicksPropagation: false, //拖动Swiper时阻止click事件

          autoplay: {

            disableOnInteraction: false, // 用户操作后是否禁止自动循环

            delay: 3000 // 自自动循环时间

          }, // 可选选项，自动滑动

          loop: true,

          spaceBetween: 0,

          longSwipesRatio : 0.1,

          centeredSlides: true,

          observer: true, // 修改swiper自己或子元素时，自动初始化swiper

          observeParents: true, // 修改swiper的父元素时，自动初始化swiper

          pagination: {

            el: ".swiper-pagination",

            type: "bullets"

          },

          on: {

            click: function() {

              const realIndex = this.realIndex;

              console.log(realIndex)

             that.to_page(realIndex, 0)

            },

          },

        }

  return option

      }

    },

methods：{

to_page(url, e) {}

}

注意： 一定要这玩意 let that = this 不然拿到不这to_page方法

---

二、如果是简单的使用那就在data中定义就好了

 data() {

　swiperOption: {

        zoom: true,

        initialSlid: 0,

        longSwipesRatio: 0.1,

        preventClicksPropagation: false,

        pagination: {

          el: ".swiper-pagination",

          type: "fraction"

        },

     },

}

---

三、注意点

动态更新数据时，初始化一定要用v-if不能用v-show，原因请自己看vue的官网，比如v-if="pictures.length"。