vue项目引入vue-swesome-swiper（vue3项目）

第一步：安装vue-swesome-swiper

npm install vue-swesome-swiper@2.6.7

 

安装完成以后去看看swiper的版本

swiper的版本不要太高了，不然可能会出现一堆的BUG

第二部：引用

dome结构如下

<div class="col">
            <swiper class="swiper1" ref="mySwiper" :options="swiperOption">
              <swiper-slide class="item videoItem"
                ><img src="../assets/img/yao_icon.png"
              /></swiper-slide>
              <swiper-slide class="item"
                ><img src="../assets/img/yao_icon.png"
              /></swiper-slide>
              <swiper-slide class="item"
                ><img src="../assets/img/yao_icon.png"
              /></swiper-slide>
              <swiper-slide class="item"
                ><img src="../assets/img/yao_icon.png"
              /></swiper-slide>
              <swiper-slide class="item"
                ><img src="../assets/img/yao_icon.png"
              /></swiper-slide>
            </swiper>
          </div>
          <div class="btn">
            <div class="pre" @click="swiperPreF"></div>
            <div class="next" @click="swiperNextF"></div>
          </div>

 

script部分

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
      swiperOption: {
        // swiper options 所有的配置同swiper官方api配置
        autoplay: 3000,
        direction: "vertical",
        slidesPerView: 2,
        spaceBetween: 20,
        loop: true,
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
  methods: {
    swiperPreF() {
      var _this = this;
      _this.$refs.mySwiper.swiper.slidePrev();
    },
    swiperNextF() {
      var _this = this;
      _this.$refs.mySwiper.swiper.slideNext();
    },
  },
};
</script>

 

因为slot在vue3里面会报错，所以swiper要用到的小组件（上一个、下一个、分页器…）都尽量的自己写吧

我这个切换效果是上下切换的，根据自己的项目需求做相应的配置就好了

 

 

 

 

 以上基本上就能正常使用了，我认为最关键的地方还是在版本上面，如果你发现使用过程中出现了某个模块找不到一类的，就去包里面检查下，包是否存在，包版本是否匹配

嗯嗯，差不多就是这样了

记录下方便以后使用，配置得有什么不对的联系我哟！

 

进阶版复用思路

由于我们可能会多次使用swiper，里面的切换方法是不是就要重写很多遍呢？

我们把这个东西集合起来怎么样呢-->贴代码

swiperPreF(node) {
      node.swiper.slidePrev();
    },
    swiperNextF(node) {
      node.swiper.slideNext();
    },

我们的切换按钮用传参的形式将节点传进来不就可以了吗

上面具体怎么使用呢，请看代码段->

<div class="mode">
            <div class="swiper">
              <swiper ref="zykcSwiper" :options="zykcOption1">
                <swiper-slide
                  ><img src="../assets/img/demoImg.png"
                /></swiper-slide>
                <swiper-slide
                  ><img src="../assets/img/demoImg.png"
                /></swiper-slide>
                <swiper-slide
                  ><img src="../assets/img/demoImg.png"
                /></swiper-slide>
                <swiper-slide
                  ><img src="../assets/img/demoImg.png"
                /></swiper-slide>
                <swiper-slide
                  ><img src="../assets/img/demoImg.png"
                /></swiper-slide>
              </swiper>
            </div>
            <div class="btn">
              <div class="pre" @click="swiperPreF($refs.zykcSwiper)">上一个</div>
              <div class="next" @click="swiperNextF($refs.zykcSwiper)">下一个</div>
            </div>
          </div>

 

传当前的ref进去就可以啦！

耶，真棒，继续赶我的进度吧

 这东西有问题，双向控制好像不能使用，我VUE3的项目，现在有了解了下swiper6和7；

7好像和vue3脚手架构建出来的环境有点不匹配，要用到esm,懒得去研究了，项目都烧到屁股上来了，就去研究了下6

结合文档和各类博客，勉强弄明白了一堆堆，下一节再讨论吧，

这个版本基本的swiper功能是没什么问题的，能用