人间废鱼
2021-07-19 11:16
采纳率: 100%
浏览 48

swiper 鼠标滚动开启后第二个幻灯片下面部分看不到了

我vue使用swiper6 总共分成两个幻灯片,开启了鼠标滚动之后,第二个幻灯片就被限制了高度无法滚动看到下面的内容了,该怎么弄?
目前使用了以下这些swiper功能

new Swiper('.swiper2', {
        direction: 'vertical', // Slides的滑动方向-垂直
        effect: 'fade',
        fadeEffect: {
          crossFade: true
        },
        // mousewheel: true,
        autoHeight: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'fraction'
        }
      });

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • CSDN专家-showbo 2021-07-19 11:35
    已采纳

    事件冲突了,到第二个的时候是要滚动还是切换呢?这个swiper可没法知道要进行什么操作。要滚动有下面3中方法,有帮助麻烦点个采纳【本回答右上角】,谢谢~~

    1)去掉mousewheel:true
    2)设置swiper-slide高度,显示所有内容
    3)添加slideChangeTransitionEnd事件,判断是需要滚动的swiper-item,调用api禁用swiper自己的滚动事件,但是切换需要点击按钮或者左右滑动来切换

    <script language="javascript"> 
    var mySwiper = new Swiper('.swiper-container',{
     mousewheel:true,
      on: {
        slideChangeTransitionEnd: function(){
          if(this.activeIndex==1) mySwiper.mousewheel.disable()//注意下标从0开始,禁用
          else mySwiper.mousewheel.enable();//切换到其他没有垂直滚动的item启用
        },
      },
    })
    </script>
    
    
    已采纳该答案
    评论
    解决 1 无用
    打赏 举报
  • wanmeikakaxi 2021-07-19 11:21

    检查一下,是否共用了一个事件,创建两个要用不同的命名参数调用

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题