当前位置: 首页 > 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

相关文章:

  • 二、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
  • 游戏代码编辑
  • 美国季度GDP时隔三年再现负增长,特朗普政府关税政策对美国经济负面影响或将持续
  • 中国固体火箭发动机领域杰出专家赵殿礼逝世,享年92岁
  • Meta一季度净利增长三成:上调全年资本支出,受关税影响亚洲出口电商广告支出减少
  • 欢迎回家!神十九返回舱成功着陆
  • 排除燃气爆炸、人为放火可能,辽宁辽阳火灾事故起火原因正在调查
  • 陕西省副省长窦敬丽已任宁夏回族自治区党委常委、统战部部长