如何在状态变更时程序化禁用Swiper JS分页的点击功能？

你当前直接将disableClick绑定到pagination.clickable的写法可能无法生效，因为Swiper初始化后不会自动监听配置对象的属性变更。以下是两种可靠的解决方式：

方法一：通过Swiper实例动态控制点击事件 #

这种方式直接操作分页元素的指针事件，无需重新初始化Swiper，适合大多数场景：

以React为例（Vue逻辑类似）：

import { useRef, useEffect } from 'react';
import { Swiper } from 'swiper/react';
import { Pagination } from 'swiper/modules';

export default function YourComponent({ initialSlide, tabsName, disableClick }) {
  const swiperRef = useRef(null);

  // 监听disableClick状态变化，动态控制分页点击
  useEffect(() => {
    if (!swiperRef.current) return;
    const swiper = swiperRef.current.swiper;
    const paginationEl = swiper.pagination.el;
    
    if (disableClick) {
      // 禁用点击
      paginationEl.style.pointerEvents = 'none';
      // 可选：添加视觉提示样式
      paginationEl.style.opacity = '0.5';
    } else {
      // 恢复点击
      paginationEl.style.pointerEvents = 'auto';
      paginationEl.style.opacity = '1';
    }
  }, [disableClick]);

  const pagination = {
    clickable: true, // 初始化时开启点击
    renderBullet: function (index, className) {
      return `<span class="${className}">${tabsName[index]}</span>`;
    },
  };

  return (
    <Swiper
      ref={swiperRef}
      initialSlide={initialSlide}
      pagination={pagination}
      modules={[Pagination]}
      className="mySwiper"
    >
      <slot />
    </Swiper>
  );
}

方法二：让分页配置响应式更新 #

如果你的项目基于Vue/React这类响应式框架，可以让pagination配置随状态动态生成，确保Swiper能感知到配置变化：

以Vue 3为例：

<script setup>
import { ref, computed } from 'vue';
import { Swiper } from 'swiper/vue';
import { Pagination } from 'swiper/modules';

const initialSlide = ref(0);
const tabsName = ref(['标签1', '标签2', '标签3']);
const disableClick = ref(false);

// 动态生成pagination配置
const pagination = computed(() => ({
  clickable: !disableClick.value,
  renderBullet: (index, className) => {
    return `<span class="${className}">${tabsName.value[index]}</span>`;
  },
}));
</script>

<template>
  <Swiper
    :initial-slide="initialSlide"
    :pagination="pagination"
    :modules="[Pagination]"
    class="mySwiper"
  >
    <slot />
  </Swiper>
</template>

注意事项： #

• 方法一无需重新渲染Swiper，性能更优，适合频繁切换状态的场景；
• 方法二依赖框架响应式机制，部分Swiper版本可能需要配合key属性强制重新渲染组件，才能让配置生效；
• 若需彻底禁用分页交互而非仅隐藏点击，可调用swiper.pagination.disable()，但该方法会隐藏分页元素，按需选择即可。

内容的提问来源于stack exchange，提问作者sagar007