「已注销」 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 请问我该如何添加自己的数据去运行蚁群算法代码
  • ¥20 用HslCommunication 连接欧姆龙 plc有时会连接失败。报异常为“未知错误”
  • ¥15 网络设备配置与管理这个该怎么弄
  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来