Swiper4.0：H5手机端滑屏判断当前页Index并且触发动画（slideChangeTransitionEnd与swiper.activeIndex）

最新推荐文章于 2022-09-22 10:15:50 发布

跳跳虎Rain

最新推荐文章于 2022-09-22 10:15:50 发布

阅读量1.2w

点赞数 2

文章标签： swiper

本文链接：https://blog.csdn.net/weixin_42450794/article/details/82188685

版权

本文介绍了如何在Swiper4.0中利用`slideChangeTransitionEnd`事件和`swiper.activeIndex`属性来判断H5手机端滑屏的当前页并触发动画。通过监听`slideChangeTransitionEnd`，可以精确获取页面切换结束后的索引，实现滑动效果与页面状态同步。

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

API：

https://www.swiper.com.cn/api/event/92.html

var mySwiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  loop: true,
  // 如果需要分页器
  pagination: {
    el: '.swiper-pagination',
  },
  // 如果需要前进后退按钮
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  // 如果需要滚动条
  scrollbar: {
    el: '.swiper-scrollbar',
  },
  on: {
    slideChangeTransitionEnd: function(){
      // alert(this.activeIndex);//切换结束时，告诉我现在是第几个slide
      if ( this.activeIndex === 1) {
        $("#znq").animate({
          "top":"23%"
        },2000)
        $("#qj").animate({
          "top":"38%",
          "right":"0"
        },2000)
        $("#hdqc").animate({
          "left":"0"