vue中Swiper动态渲染swiper-slide后轮播图呆滞划不动的问题

已于 2023-07-25 14:34:45 修改
阅读量1k 收藏
点赞数
文章标签： vue.js javascript css
于 2023-07-25 14:30:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouhx123/article/details/121466703
版权

 因项目开发中很多都有用到轮播图的地方，然后选择用了swiper，记录一下，之前一直没有发布这个文章，现在官方好像已经优化了这个问题。

下载引入，具体参考官方文档Swiper演示 - Swiper中文网
问题描述：在图片滑动时，卡住不动了。

解决方法如下：

 添加：

  observer: true, 

 observeParents: true 

 因为this.mySwiper中没有值导致的，需要进行swiper初始化一下

Adamyworld
关注
Swiper动态渲染后轮播图划不动无法自动轮播解决方案
DJg5078的博客
08-16 2378
通过Ajax获取本地JSON数据进行swiper插件轮播图动态渲染页面时所产生的无法轮播问题。
Swiper动态渲染后轮播图划不动解决方案
yhr0322的博客
11-15 2327
一、问题描述 在开发一个Jquery项目时，用到了Swiper插件，并且因为要求数据的动态性，所以swiper-wrapper里面的swiper-silde都是由Jquery动态渲染出来的DOM，结构如图所示 二、问题分析 在使用上图结构时，添加静态数据可以使用Swiper的所有功能，但在动态的向swiper-wrapper中添加swiper-slide时，Swiper的自动轮播和左右滑动功能就...
vue中使用Swiper划不动现象解决办法
wangpachong的博客
11-21 2163
Swiper实例化 new Swiper(".home-banner",{ loop:true, pagination:{ el:".swiper-pagination" } }) **这时候会出现...
swiper 划不动问题
weixin_34087307的博客
07-05 942
Swiper是目前较为流行的移动端触摸滑动插件，因为其简单好用易上手，受到很多前端开发者的欢迎。今天在使用Swiper的时候遇到这个问题： 使用模板引擎动态生成swiper-slide类，在swiper-wrapper里生成6个以上的滑动页，可是就是划不到第二页，尝试将longSwipesRatio的值修改到最小，仍然不起作用。 <...
vue使用vue-awesome-swiper轮播图不能正常滚动
韩大璐
01-08 3124
在使用vue-awesome-swiper插件写轮播图的时候遇到上图的问题。 问题描述：这是一个画廊（图片相册查看大图）功能，在父组件中调用这个个轮播图的子组件，并且在父组件中控制画廊组件的显示隐藏。功能都写好之后，发现这个子组件显示出来以后不能顺畅滑动。 解决方案： 在初始化轮播图的时候加上这两个配置项： observeParents: true, observer: tr...
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
10-17
在使用Vue与swiper结合进行动态数据加载时，可能会遇到轮播图显示白屏的问题。这个问题通常出现在数据尚未完全加载或渲染之前，swiper就开始初始化并尝试显示轮播内容。以下是一些关键知识点和解决策略。 首先，...
vue轮播图插件vue-awesome-swiper的使用代码实例
12-02
在你的Vue组件模板中，你可以使用`<swiper>`和`<swiper-slide>`组件来创建轮播图。例如： ```html <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="item in items"></swiper-slide> ...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
总之，vue-awesome-swiper 是 Vue.js 开发者在实现轮播图功能时的一个强大工具，它使得在 Vue 应用中集成 Swiper 变得简单而高效。通过熟练掌握它的用法，可以提高开发效率，提升用户体验。如果你在使用过程中遇到...
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
12-08
然而，在实际开发过程中，有时会遇到这样一个问题：当我们在数据渲染完成后发现Swiper的轮播功能无法正常工作，即手动滑动也没有任何效果。这个问题通常是由于数据加载与组件初始化之间的时序问题导致的。 首先，...
vue2中使用swiper动态遍历数据时出现不轮播的情况
熟悉JS拼写的FE
09-14 1012
Vue2项目中使用Swiper5出现BUG 前言:我们再开发项目时，难免会用到一些炫酷的轮播图，目前提供较好功能并且多端兼容的就有Swiper，版本目前是4-6，常用的是swiper5，swiper是刚刚出来的最新版本(附上Swiper官网），我这里是使用5版本遇到的动态数据后不轮播的bug 1. 去Swiper找到自己想要的配置项 根据自己项目需求找配置项 2. 这是我需要的swiper配置(修改bug之前) 提前下载npm install swiper data中的ban
vue3中使用 swiper无法滑动
最新发布
xiaobaicai_666的博客
09-05 914
vue3中没有this指向；new swiper的时候增加这两个配置即可正常滑动 { observer: true, observeParents: true }
swiper出现划不动解决办法
qq_38220077的博客
12-26 6290
直接上代码 html部分 // HTML &lt;div className="swiper-container swipertwo"&gt; &lt;div className="swiper-wrapper two"&gt; {home.types.map(item=&gt; &lt;div className="swip...
Vue项目使用swiper做轮播图时，异步调用数据时导致图片不能滑动的解决方法
热门推荐
weixin_38304202的博客
09-14 1万+
因为swiper提前初始化了，那个时候还没有数据，当数据调出来时已经没用了，所以有以下几个解决方法： 1、在数据调用结束后再进行swiper初始化 api.advertisingDate({}, function (res) {     that.advertising = res         that.$nextTick(function () {             that
Swiper(滑动不了）
weixin_46061574的博客
04-16 5165
大概是想浅试一下swiper所以写了一个大概是这样的一个滑动效果 state中放了一个list分别为111，222，333，滑动时应该在这三者之间进行滑动效果写完之后，我的效果完成不了，搜索一下原因，大概的解决方法为以下几种： a、在使用上图结构时，添加静态数据可以使用Swiper的所有功能，但在动态的向swiper-wrapper中添加swiper-slide时，Swiper的自动轮播和左右滑动功能就会失效。也就是说Swiper不能用了。 后来看了下官网文档然后认真理了下项目的思路，发现应该是同步
vue swiper动态获取数据无法滑动问题
weixin_45359072的博客
06-08 1473
简述： 使用swiper插件时，需要通过接口获取图片路径、图片名称等，会出现无法滑动或空白的现象。原因是swiper在获取接口之前初始化，这样渲染的是没获取图片之前的页面。 解决方法一：再用接口调出数据后，初始化swiper <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="bas
解决vue-swiper的banner无法滑动现象
杨伯聿博客
07-31 2299
css代码 <style> .swiper-container { width: 600px; height: 300px; } </style> html代码 <div id="app"> <input type="text" v-model="num"> <div class="swiper-co...
swiper的bug,如果数据是从网络获取的，那么自动轮播到最后一页之后就不轮播了
weixin_40466655的博客
07-19 318
swiper的bug,如果数据是从网络获取的，那么自动轮播到最后一页之后就不轮播了
vue swiper 滑动切换slide时，导致setInterval卡顿，附带解决方法
Vintage
12-26 4699
 具体现象如下图，可以看到，每次滑动slide或者通过导航箭头切换slide的时候，上方的倒计时总是在slide结束后卡顿0.3s左右的时间。  在导航箭头上，在每次执行slide滑动后，都有一个v-show的判断是否到达slide的尽头，然后分别决定他们是否显示。我的部分代码如下图，我会将一些相关的圈出来： 在图中，红框部分是用来判断导航箭头是否显示的 ，我发现在这里他们会导致动图中...
vue组件切换时卡顿
08-18
您好！对于Vue组件切换时出现卡顿的情况，有几个可能的原因和解决方案： 1. 大量数据渲染：如果组件切换涉及大量数据的渲染，可能会导致卡顿。此时可以考虑进行分页加载或者使用虚拟滚动等技术，减少一次性渲染的数据量。 2. 长时间计算：如果在组件切换时存在较长时间的计算操作，可能会导致界面卡顿。可以将计算操作放到Web Worker中，避免阻塞主线程。 3. 异步加载资源：如果组件切换涉及异步加载资源，如图片、样式表等，加载时间过长也会导致卡顿。可以使用懒加载或者预加载等技术，提前加载所需资源。 4. 优化渲染性能：可以通过减少不必要的重新渲染、使用shouldComponentUpdate进行组件更新的优化、合理使用Vue的v-show和v-if指令等方式，提高渲染性能。 5. 检查代码质量：不规范的代码、内存泄漏等问题也可能导致组件切换时的卡顿。建议使用代码静态分析工具进行检查，排查潜在问题。 希望以上提供的解决方案能够帮助您解决组件切换时的卡顿问题！如有更多疑问，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值