swiper display:none 后 在显示 滑动问题

最新推荐文章于 2024-04-30 17:22:48 发布
最新推荐文章于 2024-04-30 17:22:48 发布
阅读量2w 收藏 5
点赞数 10
CC 4.0 BY-SA版权
分类专栏： swiper 文章标签： swiper
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_31301099/article/details/53910653
本文介绍如何通过简单配置让 Swiper 在自身或其子、父元素发生变化时自动更新，避免手动重新初始化。只需启用 observer 和 observeParents 选项即可。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一般这种问题  必须在本身元素  或者父元素  显示出来  然后调用swiper实例   

或者

只需加两行

  observer:true,//修改swiper自己或子元素时，自动初始化swiper

  observeParents:true//修改swiper的父元素时，自动初始化swiper

具体描述  swiper 官网  的api   http://www.swiper.com.cn/api/Observer/2015/0308/218.html



解决swiper在tab切换时，swiper不生效，以及display:none后，无法自动滑动的问题
qsj0606的博客
02-02 1582
解决swiper在tab切换时，swiper不生效，以及display:none后，无法自动滑动的问题 问题是这样的：当你兴高采烈的写完一个tab，并且把swiper嵌入到每一个tab item 觉得大功告成的时候，你会发现，永远只有第一个tab上的swiper生效了，其余的不管你怎么切换，swiper总是初始化失败，是的，就是不能愉快的滚动了~ 方法一、官网给出的解决方案是，使用observer：swiper4的api地址: https://www.swiper.com.cn/api/observer/2
多个swiper同时存在切换tab因父级为display:none子级swiper卡住无法正常切换
qq_42430038的博客
10-31 451
多个swiper同时存在切换tab因父级为display:none子级swiper卡住无法正常切换
swiper display:none 后 再显示 滑动问题怎么解决
weixin_42138420的博客
08-06 516
swiper display:none 后 再显示 滑动问题怎么解决 第一种方法 一般出现这种问题，需要让他显示出来后进行**“初始化”**操作 第二种方法 可以使用透明度解决，不显示的时候将透明度设置为0，显示的时候设置透明度为1，这样就可以解决问题了。 ...
Swiper隐藏后在显示滑动问题
weixin_30433075的博客
01-23 806
<div class="labs" style=“display:none”> <div class="swiper-wrapper"> {{each $data.result}} <div class="swiper-slide"> <ul class="cf"> {{each $valu...
vue-awesome-swiper遇到的坑！！！（包括swiper display: none后在显示的bug）
热门推荐
qq_41108402的博客
06-02 2万+
前言 最近项目需要一个基于Vue可以滑动的组件，想到之前用jQuery的时候用到了一个非常强大的swiper组件，于是想看看有没有基于Vue的Swiper组件，果不其然，发现了一下vue-awesome-swiper正是自己需要的，结果不用不知道，用起来才发现巨坑无比！！!所以特此说明下有什么坑。 一、版本问题 首先说明一下，本人使用的vue-awesome-swiper版本...
解决 uniapp 微信小程序 swiper里的内容不显示问题 - 个人笔记
树上骑个猴的博客
02-07 3821
问题描述： 页面是拥有3个item的swiper，每个swiper都是一个长滚动列表，每个列表都是都是一个个item(封装成名为dataItem的组件)，其中给dataItem组件传递“itemdata”和“currentType”参数，但是itemdata显示没问题，下面的按钮部分不显示(如果用户左右手动切换swiper又可以显示)，尝试了v-if、setTimeout、nextTick等都没有效果，后来才发现是currentType 的问题，于是把currentType 从v-if条件里面去掉。盲猜是s
swiper display:none后显示 无法滑动的问题
weixin_42065274的博客
08-19 965
swiper display:none后显示 无法滑动的问题 一般这种问题 必须在本身元素 或者父元素 显示出来 然后调用swiper实例 或者只需加两行 var swiper = new Swiper('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项...
swiper父级元素处于隐藏状态滚动效果失效问题
回忆的夏天
12-25 1055
在使用vue-awesome-swiper的时候，实现这样一个功能, 点击页面的banner图（Banner.vue），进入一个图片画廊（Gallary.vue），可以查看更多相关的照片，但发现轮播图滚动效果失效 原因是：一开始Gallay.vue的所有用swiper控制的图片处于隐藏状态，直到点击才进入图片画廊显示图片。swiper其父级元素处于隐藏状态(display:none), 会导致s...
swiper-slide上下滑动display: grid
07-29
在Swiper中，要在swiper-slide上实现上下滑动的display: grid效果，你可以通过设置slide的类名来实现。你可以使用slideClass属性来设置slide的类名，比如设置为'my-slide'。然后，在CSS中，你可以使用.my-slide类来...
Swiper轮播图
最新发布
那片枫叶~
04-30 178
使用： <SwiperV :imgList=“swiperList” /处理每分钟重新请求数据后，播放卡顿，快速闪，没按照设置时间播放等bug。版本：“swiper”: “^6.8.4”,以下是直接vue2 完整的组件代码。
使用swiper插件获取后台数据的坑
qq_37012533的博客
11-14 1327
使用swiper插件获取后台数据时，loop:true会失效。 原因就是dom元素还没渲染出来，添加一个定时器即可解决。 setTimeout(()=>{ this.mySwiper = new Swiper('#swiper-container',{ observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:t...
解决swiper在标签页里面 先隐藏后显示 之后 的一系列问题
第7维度 - 日常笔记
07-12 3993
方法一：当页面很简单的时候，比如 页面时只有一个标签页，那么我们直接用最简单的方法，直接看官网就可以啦API就可以啦，里面提供了API —–&gt; http://www.swiper.com.cn/api/observer/218.html 如下就是啦： var swiper = new Swiper('.newlb2 .swiper-container', { paginatio...
对swiper进行显示或隐藏，swiper无法正常轮播
ppx_mqj的博客
09-03 2913
在项目的时候，根据需求需要对轮播图进行显示和隐藏，在做好轮播之后，再进行显示和隐藏的时候发现轮播无法正常运行了。 然后到swiper中文网查询了一通，终于找到解决的方法了 文档是这么说的： 同时还要加一个observeParents这个属性值 来话不多说直接上代码： 更多请参考swiper中文网：https://www.swiper.com.cn/api/observer/219.html ...
swiper中遇到的坑
dieying2398的博客
09-27 303
observer:true,//修改swiper自己或子元素时，自动初始化swiper observeParents:true,//修改swiper的父元素时，自动初始化swipe 　　大部分切换的问题会解决，哎，忙活一下午，看api 转载于:https://www.cnblogs.com/wpTing/p/9714636.html...
swiper有时候不能自动滚动的有关问题
Young
03-15 6533
swiper有时候不能自动滚动的问题 $(function(){ var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: true, speed: 500
img{display:block}
Soler_lia的博客
09-29 2568
有些版本浏览器，在图片和文字间会出现白边。加上 img{display:block} ，将img变为块元素。 区块和内联块最大的区别就是，区块可以设置宽、高、居中对齐等操作，而内联块不行。 因为img默认是按基线(baseline)对齐的。对比一下图片和右边的p字母，你会发现这三个字母的“小尾巴”和图片下方的空白一样高。下面这张图中的黑线就是那条基线。 要去掉空格可以使用vertic
observeParents的使用
anxw66497的博客
10-28 770
observeParents参数 是布尔类型 默认false 在tab切换选项中有轮播图，切换后轮播图就不播了，并且显示也出现了问题，就可以使用observeParents 用法为 <script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ pagination...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值