swiper父级元素处于隐藏状态滚动效果失效问题

最新推荐文章于 2024-04-24 17:11:19 发布
最新推荐文章于 2024-04-24 17:11:19 发布
阅读量1k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 插件系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lxjstudyIT/article/details/103693700
在Vue项目中使用vue-awesome-swiper，遇到点击Banner进入Gallary.vue图片画廊时，由于swiper的父级元素初始为隐藏状态，导致轮播图滚动效果失效。问题在于隐藏状态使得swiper初始化失败。解决方法是在swiper配置中启用observer和observeParents选项，以实现在父元素显示变化时，swiper能动态更新并恢复滚动效果。

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

在使用vue-awesome-swiper的时候，实现这样一个功能, 点击页面的banner图（Banner.vue），进入一个图片画廊（Gallary.vue），可以查看更多相关的照片，但发现轮播图滚动效果失效

原因是：一开始Gallay.vue的所有用swiper控制的图片处于隐藏状态，直到点击才进入图片画廊显示图片。swiper其父级元素处于隐藏状态(display:none), 会导致swiper初始化失败, 页面中的滚动效果就会有问题。

Gallary.vue的结构

<template>
    <div class="container"  @click="handleGallaryClick">
        <div class
最低0.47元/天 解锁文章

200万优质内容无限畅学
2021年最新Web前端面试题精选大全及答案
m0_54861649的博客
03-07 2165
目录 HTML、CSS相关 Javascript相关 三者的异同 Vue相关 55.Vue路由懒加载（按需加载路由） React相关 react 生命周期函数 ******为什么虚拟 dom 会提高性能?(必考) (组件的)状态(state)和属性(props)之间有何不同 shouldComponentUpdate 是做什么的 react diff 原理 何为受控组件 调用 super(props) 的目的是什么 React 中构建组件的方式 小程序相关的 其他 企业中的项目流程 奇葩问题 HTML、C
问题：Swiper父容器隐藏时实例化组件，组件滑动失效
weixin_34247032的博客
10-18 219
解决办法：初始化组件时，配置 observe true、observeParents true。 observe参数 启动动态检查器(OB/观众/观看者)，当改变swiper的样式（例如隐藏/显示）或者修改swiper的子元素时，自动初始化swiper。 observeParents参数 将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如...
Vue3使用Swiper轮播失效解决方法
qq_57448638的博客
04-24 1973
各种办法都试过了，最后在Package.json文件中发现使用的是Swiper11版本。Swiper11版本使用Autoplay需要导入对应的模块和Css。（当然，作者我只是一个小白，如果写错了请嘴下留情QAQ）在公司vue3项目使用Swiper做一个轮播图，结果做出来后发现无论如何都不会自动轮播。
swiper 隐藏显示后 无法自动轮播
RedXx
12-02 1466
2020-12-2 用的swiper6这个版本 根据官网逻辑隐藏显示后，应该可以自动轮播 发现无效 退而求其次使用swiper3版本 只要在隐藏前先手动停止轮播 显示后再手动开始轮播 解决问题 var mySwiper1 = new Swiper('#swiper1', { autoplay: '3000', //可选选项，自动滑动 loop: true, // 循环模式选项 direction: 'vertical', //添加如.
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
浮生离梦的博客
12-31 2937
一、需求问题 在之前的项目开发中，使用了swiper插件。由于是vue项目，对于swiper的轮播图我们使用了v-show命令，进行动态隐藏与显示。只有当点击进行一些操作以后，swiper的轮播图才会显示出来。但是，在使用v-show命令以后，swiper的轮播图显示和分页不正常，样式出现问题，无法正常显示。 二、需求分析 在swiper的配置中，我们一开始进行配置了pagination和pagi...
swiper 父级元素display:none 之bug
weixin_30527143的博客
12-13 330
问题描述: 同一个页面,点击底部tab按钮切换div的显示与隐藏,点击到第四个页面时 轮播图总是不动,出bug function start(){ var mySwiper = new Swiper('.swiper-contain', { autoplay: 3000,//可选选项，自动滑动 speed: 300, loop: true, observer: tr...
swiper中设置子元素position：fixed失效
12-28
对于这种情况，建议尝试禁用可能引起冲突的 CSS 效果，比如将 `.swiper-container` 及其上级元素中的任何 `transform` 设置暂时取消掉，看看问题是否得到解决[^1]。 #### 方法三：利用 JavaScript 动态处理 另一种...
swiper嵌套swiper外部无法滑动
01-17
针对uniapp环境下安卓端swiper嵌套swiper图片轮播和视频时不流畅的情况，可以采用手动监听滑动方向并动态调整滑屏效果的方式[^1]。 #### 方法一：阻止内部组件冒泡事件传播 通过给`swiper-item`内的子组件添加触摸...
前端无缝滚动和switch切换是冲突的吗
最新发布
03-19
对于兼容性问题，可以采用渐进增强的策略，检测浏览器支持情况，必要时回退到简单的滚动效果。同时，使用第三方库如Swiper.js可能已经处理了大部分兼容性问题，节省开发时间。 另外，事件冒泡和捕获阶段的问题也...
加display:none后swiper轮播滑动失效
rouduo_zjy的博客
11-26 1575
加display:none后swiper轮播滑动失效 1.当一个页面中用到多个swiper插件时，如果swiper名字相同时，轮播滑动会错乱，解决方法：swiper名字不相同即可恢复正常轮播效果 2.当swiper遇上display：none时轮播效果也会失效，控制台如下图的错误： 解决办法： //添加如下两句代码即可恢复自动轮播 observer:true,//当改变swiper的样式（例如隐...
元素的位置和滚动效果
一李
02-06 190
offset and position offset:相对于页面左上角的位置（可以有参数） position：相对于父元素左上角的位置 $('#btn1').click(function(){ //相对于页面左上角的位置 var offset = $('.div1').offset() console.log(offset.left,offs...
swiper——vue页面配合显示隐藏渲染两个轮播插件
Juliet_xmj的博客
09-13 816
swiper——vue页面配合显示隐藏渲染两个轮播插件 问题：显示隐藏 项目中使用vue v-show控制轮播盒子不同渲染，但是会出现第一次点击，轮播插件显示出现错误，具体表现为轮播子元素只剩下一个，且为缩小状态，需要多次切换显示轮播才能正常显示 解决： this.$nextick() 1.注意两个轮播盒子要使用不同的父元素，swiper-container不能用做最外层盒子 2.切换显示隐藏方法需要调用加载swiper方法 3.使用this.$nextTick()方法防止swiper方法初始化出现问题
前端开发swiper轮播，切换显示和隐藏父元素时出现的问题
Yangjie_iii的博客
08-16 1710
最近开发的一个项目，里边的轮播图用的是swiper，遇到的问题就是，如果在一个弹出层内写swiper轮播时，当切换显示隐藏的时候，swiper会失效，样式有可能会变乱。 解决方法： <script language="javascript"> var mySwiper = new Swiper('.swiper-container',{ observer:true, ...
iframe设置display:none导致嵌入的页面之前的滚动位置清零
qq_36093530的博客
04-17 818
使用iframe同时嵌入多个页面时,iframe设置display:none导致嵌入的页面之前的滚动位置清零
vue&vue-cli 3.0项目中遇到的有趣问题（四）
LIMI_伞梦的博客
04-12 565
1、vue中页面跳转的方式 2、逐行展示，多余省略的样式 3、取消div滚动的滑轮 4、div居中方法汇总
解决切换标签页，display：none，导致echarts图表变形
weixin_50789048的博客
06-26 632
获取iframe的宽度，乘上你所给的百分比，然后加载图表。解决方法1：宽高给固定长度。
vue中使用vue-awesome-swiper，切换显隐时autoplay失效
weixin_44027616的博客
04-06 2240
vue中使用vue-awesome-swiper，多个轮播图切换显隐时autoplay失效问题的解决。
Swiper动态渲染后轮播图划不动无法自动轮播解决方案
DJg5078的博客
08-16 2670
通过Ajax获取本地JSON数据进行swiper插件轮播图动态渲染页面时所产生的无法轮播问题。
swiper动态追加的slide无法滑动
Xiao_peng117的博客
12-24 3581
参考：https://blog.youkuaiyun.com/aiyishengyishi/article/details/53634659 原因：swiper初始化一次，如果追加了之后，但是初始化时记载了总共有多少个slide； 解决方法；每次追加后，重新初始化swiper 快捷初始化方法： 添加 observer:true, observeParents:true var swiper =...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值