Vue3 Swiper.js中Control组件一控制多的方法

qq_38677882

已于 2023-08-10 22:56:53 修改

阅读量388

点赞数

文章标签： javascript vue.js 前端

于 2023-08-10 22:34:59 首次发布

本文链接：https://blog.csdn.net/qq_38677882/article/details/132220000

版权

文章介绍了如何在Vue中使用Swiper的Controller组件实现控制和被控制的swiper滑块，并提到在实践中遇到的坑，如使用ref获取实例的问题和确保位置对应性。最后指出链式控制可以解决这个问题。

摘要由CSDN通过智能技术生成

代码如下

<template>
  <!-- Main Swiper -> pass controlled swiper instance -->
  <swiper
    :modules="[Controller]"
    :controller="{ control: [firstSwiper , secondSwiper ] }"
    
  >
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
  </swiper>

  <!-- Controlled Swiper -> store swiper instance -->
  <swiper :modules="[Controller]" @swiper="setFristSwiper" id="firstSwiper">
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
  </swiper>
  <swiper :modules="[Controller]" @swiper="setSecondSwiper" id="secondSwiper">
    <swiper-slide>1</swiper-slide>
    <swiper-slide>2</swiper-slide>
  </swiper>
</template>
<script >
  import { ref } from 'vue';
  import { Controller } from 'swiper';
  import { Swiper, SwiperSlide } from 'swiper/vue';

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      let firstSwiper = ref(null)
      let secondSwiper = ref(null)
      const setFristSwiper = (swiper) => {
        firstSwiper.value = swiper;

      };
      const setSecondSwiper = (swiper) => {
        secondSwiper.value = swiper
        
      };

      return {
        Controller,
        firstSwiper,
        secondSwiper,
        setSecondSwiper,
        // controlledSwiper,
        setFristSwiper,
      };
      
    },
  };
</script>

实测可以运行。

由官方文档的vue使用control组件的demo改写。html区域的注释是官方的。

控制的和被控制的swiper都需要controller模块，被控制的要设置@swiper的方法，名字不必对照id，自己取的也可以。

被控制的要设置id而不是ref，id和setup里的变量同名。这里就是一个大坑，官方的注释如上写着说swiper的实例，我下意识的使用ref去获取实例，死活弄不成。。。然后尝试document的方法，又发现在setxxx的方法（因为当时没写ref所以去掉了.value）里显然这么写是没用的，又把ref加了回去，发现能用了。。最后去掉了一些代码剩下这些应该就是必要的代码了。。

（不过这个写法虽然能动但数组第二个被控制的swiper会不和控制的swiper位置对应，但目前已经知道了怎么设置control组件后，改成链式控制就轻车熟路了，实测链式控制内容是能对上的）