首页 > 其他分享 >swiper6版本下滚轮失效&分页失效等的问题

swiper6版本下滚轮失效&分页失效等的问题

时间:2024-09-13 14:38:26浏览次数:10  
标签:index 滚轮 swiper6 Swiper import 失效 Swiper2 swiper

swiper6中一些配置会失效

原因是控件需要单独引入

 

如我 这次用的swiper相关版本是: 

npm i [email protected] [email protected]   在滚轮切换、分页、左右切换和动效配置中,都需要单独引入控件  
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import Swiper2, { Pagination, EffectCoverflow, Navigation } from "swiper";
import "swiper/swiper-bundle.css";
Swiper2.use([Pagination, Navigation, EffectCoverflow]);

  

import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import Swiper2, { Mousewheel } from "swiper";
import "swiper/swiper-bundle.css";
Swiper2.use([Mousewheel]);

  

其余照旧即可

附上鼠标滚轮切换的配置:

        mousewheel: true,
        mousewheelControl: true,
        observer: true,
        observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时,例如window.resize,Swiper更新

  

 以及vue-awesome-swiper版本不同时,写法也会不同

之前用3.1.1时,跳页的方法是这么写的:

    //手动跳到指定页
    change(index) {
      this.$refs.moduleSwiper.swiper.slideTo(index);
      this.active = index;
    },
    slideChange() {
      const index = this.$refs.moduleSwiper.swiper.activeIndex;
      this.active = index;
    },

  

升级到4之后,swiper需要加$才能获取到:

    //手动跳到指定页
    change(index) {
      this.$refs.moduleSwiper.$swiper.slideTo(index);
      this.active = index;
    },
    slideChange() {
      const index = this.$refs.moduleSwiper.$swiper.activeIndex;
      this.active = index;
    },

  

包括swiper.css的样式引入路径也不同

之前swiper5是在css文件夹下的,swiper6则直接在插件根目录下:

import "swiper/swiper.less";

  

 

 

标签:index,滚轮,swiper6,Swiper,import,失效,Swiper2,swiper
From: https://www.cnblogs.com/nangras/p/18412129

相关文章

  • 爬虫代理失效怎么处理?全面解决方案
    在进行网络爬虫时,使用代理IP是一个常见且有效的手段。然而,代理IP的失效是不可避免的问题。当代理IP失效时,爬虫程序可能会遇到请求失败、连接超时等问题。本文将详细介绍如何处理爬虫代理失效的问题,确保你的爬虫程序能够稳定高效地运行。代理IP失效的常见原因1.代理IP被目标......
  • Spring事务失效的原因
    问题背景在业务实现当中,多线程并发操作会带来一些安全问题上的挑战。例如,在秒杀业务中,我们不仅要考虑多线程并发执行时对库存的考虑,还要考虑每个用户的请求是否由一个线程发出,当一个用户的请求由多个线程发出时,可能是脚本代刷的情况,这同样会导致业务出现异常。方法级别的......
  • Flask session cookie 失效在Safari中的解决方法
    Flask会默认使用客户端会话管理,数据存储在浏览器的cookie中。这种方法通常在各种浏览器中工作良好,但有时可能会在Safari中遇到sessioncookie失效的问题,特别是使用了iOS或macOS上的Safari。这个问题常见的原因是Safari中的隐私设置,尤其是涉及到“防止跨站追踪”和第......
  • MySQL索引学习记录(创建、删除、优缺点、底层结构、生失效原则等等)
    1.认识索引1.什么是索引MySQL官方对索引的定义为:索引(index)是帮助MySQL高效获取数据的数据结构(有序)。在数据之外,数据库系统还维护着满足特定查找算法的数据结构,这些数据结构以某种方式引用(指向)数据,这样就可以在这些数据结构上实现高级查找算法,这种数据结构就是索引。将数据......
  • 注解@Async失效的情况
    注解@Async失效的情况异步任务处理注解方法@Async实现异步多线程https://www.cnblogs.com/oktokeep/p/15720935.html1.注解@Async的方法不是public方法2.注解@Async的返回值只能为void或Future3.注解@Async方法使用static修饰也会失效4.spring无法扫描到异步类,没加注解@Async或......
  • 美团面试:mysql 索引失效?怎么解决? (重点知识,建议收藏,读10遍+)
    文章很长,且持续更新,建议收藏起来,慢慢读!疯狂创客圈总目录博客园版为您奉上珍贵的学习资源:免费赠送:《尼恩Java面试宝典》持续更新+史上最全+面试必备2000页+面试必备+大厂必备+涨薪必备免费赠送:《尼恩技术圣经+高并发系列PDF》,帮你实现技术自由,完成职业升级,薪......
  • 【数据安全】机器电子设备防拆机数据自毁拆开就失效
    系列文章目录1.元件基础2.电路设计3.PCB设计4.元件焊接5.板子调试6.程序设计7.算法学习8.编写exe9.检测标准10.项目举例11.职业规划文章目录前言1、软件自毁①、昙花一现②、时光逆转2、硬件自毁①、物理攻击②、化学攻击③、魔法攻击前言送给......
  • vscode单行注释失效解决办法
    第一种情况:bug:在使用快捷键注释的时候,只有style和script标签里的内容注释有问题,无法使用快捷键注释。解决方法:禁用vscode的插件Jinja。第二种情况方法一1、Ctrl+shift+p打开命令面板输入:preferences:OpenSettings(JSON);2、在setting.json中添加"files.associations":......
  • ISO 26262中的失效率计算:SN 29500-3 Expected values for discrete semiconductors
    目录概要1基准条件下的失效率2失效率转换2.1失效率预测模型2.2电压应力系数2.2.1电压应力系数计算模型2.2.2电压应力系数计算2.3温度应力系数2.3.1温度应力系数计算模型2.3.2温度应力系数计算2.4漂移灵敏度系数3任务剖面应力系数4早期失效系数概......
  • 在多线程环境下,如何解决 Java 函数失效的问题?,java 多线程处理数据
    在多线程环境下,Ja函数失效的问题是开发者常常遇到的一个挑战。多线程带来了并发执行的优势,但同时也增加了代码的复杂性,尤其是在涉及共享资源时,如果处理不当,可能会导致函数失效,甚至引发更严重的问题。本文将探讨一些常见的Ja函数失效原因,并提供相应的解决方法。我们需要了解函数失......