「已注销」 2021-07-19 11:16 采纳率: 66.7%
浏览 64
已采纳

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条)

报告相同问题?

问题事件

  • 已采纳回答 7月19日
  • 修改了问题 7月19日
  • 创建了问题 7月19日

悬赏问题

  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作