vue 动态修改 swiper 属性失效

export default {
  data() {
    return {
      mySwiper
    };
  },
  mounted() {
    this.mySwiper = new Swiper(".swiper-container-slide", {
      noSwipingClass: "stop-swiping",
      pagination: {
        el: ".swiper-pagination",
        clickable: false,
        renderBullet: function(index, className) {
          return '<span class="' + className + '">' + (index + 1) + "</span>";
        }
      },
      navigation: {
        prevEl: ".swiper-button-prev",
        nextEl: ".swiper-button-next"
      },
      on: {
        reachEnd: () => {
          this.mySwiper.params.pagination.clickable = true; // 对 clickable 属性进行了修改,但失效
          console.log("到了最后一个slide");
        }
      }
    });
  }
};

我的预期效果是默认分页器无法点击,但当滚动到最后一页的时候,分页器方开启点击,经过如下尝试均以失败告终:

  • 尝试通过官方api this.mySwiper.params.pagination.clickable 方法,失效;
  • 尝试通过直接修改 data 方法,失效;
  • 尝试通过 watch 监视修改方法,失效;

还望指点,谢谢!

阅读 4.9k
2 个回答

按照官网的案例,设置后需要重新初始化

//如果你在swiper初始化后才决定使用clickable,可以这样设置 
mySwiper.params.pagination.clickable = true ; 
//此外还需要重新初始化pagination 
mySwiper.pagination.destroy()
mySwiper.pagination.init()
mySwiper.pagination.bullets.eq(0).addClass('swiper-pagination-bullet-active');

试试看:
在data里面定义一个clickable:false
pagination对象那里用this.clickable代替false
reachEnd函数里面改为this.clickable = true

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题