当前位置: 首页 > news >正文

vue中使用swiper坑记录

swiper中左右按钮切换和vue 的v-show v-if结合使用

现象:当vue中使用v-show或者v-if控制swiper的显示或者隐藏的时候,swiper只在第一次加载的时候能够正确切换,一旦隐藏或者显示之后就不起作用了。
原因:好像是因为display:block造成了swiper的bug.
解决方案:
1.添加如下属性:

        observeParents: true,observer: true,

swiper 3.4.2版本测试有效
2.上面属性如果不起作用,可以考虑从display入手,可设置visible属性(未经测试)

坑2

左右切换按钮disable状态设置了css pointer-events:none 当点击切换按钮的时候,点击事件会透传到下一层,设置阻止冒泡也不起作用。

解决方案:

pointer-events:auto
http://www.dtcms.com/a/135597.html

相关文章:

  • 二、The Power of LLM Function Calling
  • 京东商品详情API接口调用讲解(实战案例)
  • Day56 | 99. 恢复二叉搜索树、103. 二叉树的锯齿形层序遍历、109. 有序链表转换二叉搜索树、113. 路径总和 II
  • 使用openpyxl时的一些注意点
  • 1.2 腾讯校招通关指南-面试官评分标准:技术岗/产品岗核心考核点揭秘
  • 【自相关】全局 Moran’s I 指数
  • OPPO Android 移动设备日志文件目录结构及其内容分析
  • git合并分支原理
  • 适合stm32 前端adc使用的放大器芯片
  • jetson orin nano 开发板conda 的 base 环境在 shell 启动时自动激活
  • 如何解决服务器文件丢失或损坏的问题?
  • JAVA学习-Stream
  • Spring IoC与DI详解:从Bean概念到手写实现
  • Spring Batch 专题系列(四):配置与调度 Spring Batch 作业
  • 分库分表-除了hash分片还有别的吗?
  • 算法思想之分治-快排
  • Java基础 4.15
  • PCL八叉树聚类
  • Python基础语法2
  • 游戏代码编辑
  • 凸优化第2讲:凸优化建模
  • 一篇文章快速上手linux系统中存储多路径multipath的配置
  • MCP、RAG与Agent:下一代智能系统的协同架构设计
  • Cribl 中数据脱敏mask 的实验
  • 【HDFS】BlockPlacementPolicyRackFaultTolerant#getMaxNode方法的功能及具体实例
  • BufferedReader 终极解析与记忆指南
  • 使用python求函数极限
  • Java实现选择排序算法
  • 盛水最多的容器问题详解:双指针法与暴力法的对比与实现
  • vcast工具env环境问题二:<command-line>: error: stray ‘\’ in program