当前位置: 首页 > 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
  • 游戏代码编辑
  • 由“环滁皆山”到“环滁皆景”,滁州如何勾勒“文旅复兴”
  • 张巍|另眼看古典学⑩:再创作让古希腊神话重获生机——重述厄勒克特拉
  • 直播电商监管新规将公开征求意见,出重拳净化行业生态
  • 释新闻|特朗普喊话鲍威尔早点走人,美国总统能否解雇美联储主席?
  • 陈尚君:唐文治的环球旅行
  • 敦煌网下载量爆增,创始人曾与雷军共同创业,近日推出“美国囤货促销”