vue-awesome-swiper动态获取数据轮播失效

最新推荐文章于 2022-03-14 19:41:12 发布
原创 最新推荐文章于 2022-03-14 19:41:12 发布 · 744 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #es6 #npm

在Vue项目中使用vue-awesome-swiper插件时，遇到轮播图片因数据未完全加载导致循环轮播失效的状况。通过设置初始化属性未能解决问题。解决方法是在swiper组件上使用v-if指令，确保数据加载完成后再运行，避免组件初始化时的数据冲突。

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

在vue项目中用vue-awesome-swiper这个插件，我轮播图片一般通过后端获取，循环展示，但会出现循环轮播失效的问题。

设置了初始化属性依然无效：

 

原因是循环还没有完的时候swiper组件运行冲突出错导致的，在swiper组件上对数据价格v-if就可以解决。代码如下： 

 

 

vue中使用vue-awesome-swiper做轮播 ，手动滑动、vue-router路由跳转和动态更新数据，导致自动轮播失效问题
qq_35893561的博客
02-25 3790
vue中使用vue-awesome-swiper做轮播 ，手动滑动和vue-router路由跳转，导致自动轮播失效问题前言问题一：手动滑动后，自动轮播失效问题二：vue-router路由跳转后再回到轮播图页面 前言 在做vue项目中使用vue-awesome-swiper插件做轮播图时，遇到的两个自动轮播失效问题，记录下来，也给遇到同样问题的小伙伴一个参考。 问题一：手动滑动后，自动轮播失效 sw...
使用vue-awesome-swiper不能自动轮播
front的博客
11-27 1535
问题 图片不能自动轮播 原因 vue-awesome-swiper是在swiper上做的一个封装，所以它的版本不是紧跟swiper的，有一个代差。 我遇到的问题解决方案： vue-awesome-swiper是4.1.1，把package里的swiper依赖从6.x改成5.4.5 如下图 自动轮播配置 swiperOptions: { loop: true, autoplay: { disableOnInteraction: false, delay: 4000 } } 参考
vue awesome swiper异步加载数据出现的bug问题
08-27
主要介绍了vue awesome swiper异步加载数据出现的bug问题,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue-awesome-swiper4 轮播无效问题
weixin_36508680的博客
12-31 403
vue-awesome-swiper4 轮播无效问题 最新版本出现轮播无效问题，其他功能正常。不管怎么调试和配置，始终无效。最后使用3.1.3版本才轮播正常。以下是安装步骤： cnpm i vue-awesome-swiper@3.1.3 --save 前端引入代码 <template> <div class="swiper"> <swiper ref="mySwiper" :options="swiperOptions"> <
vue-awesome-swiper autoplay (自动轮播)不生效 解决 方案
gongzuoyongde的博客
11-30 5999
仅针对vue-awesome-swiper版本在4以上的 很多小伙伴引入的swiper版本都已经达到了4-6，发现autopaly按照之前的配置方式不生效。原因是：官方已经将autoplay单独的分离了出来，需要单独引入。话不多少，完整的配置方案和使用方法如下： // main.js文件 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/swiper-bundle.min.css' Vue.use(VueAwesomeSwi
vue-awesome-swiper 轮播--动态数据 循环失败解决办法
yjITcsdn的博客
06-18 732
问题描述: 在开发过程中可以选择各种轮播插件来实现轮播功能。 在使用vue-awesome-swiper 这个轮播插件时，动态绑定的数据后不可循环。 轮播功能描述： 1.在界面中显示3张图片 2.选中的图片在中间其放大显示 3.循环轮播、不自动轮播 4.默认选中第一张图片 5.切换图片时，获取对应图片的下标 list: [], //页面所有数据 //轮播设置 swipe...
Vue轮播，vue-awesome-swiper动态数据渲染，首次各种配置无效，轮播图没有效果。
Sodaxiang的博客
04-18 946
在做vue项目时，使用vue-awesome-swiper首页轮播，banner图数据从服务器端加载；但发现使用的过程中轮播图不起作用，没有生效。 分析： 轮播图的数据是由父组件网络请求之后得到的，在用子组件打印swiper的数据的时候，发现是[]，此时并没有拿到网路请求的数据，所以会导致轮播图无效果，只默认显示第一张图片。 解决： 在父组件渲染轮播图组件的时候，加一层v-if判断，当有轮播图数据的时候再进行轮播图组件的渲染，就可以解决该问题了。 <index-swiper ...
vue-awesome-swiper 的bug：轮播图自动轮播到最后一页就不轮播了？
即使萍水也不要相逢的博客
02-25 2109
项目场景： 在开发vue项目的时候，需要做一个轮播图，因此小编使用了 vue-awesome-swiper 三方库（链接：https://github.com/surmon-china/vue-awesome-swiper）； html 代码如下： <swiper :options="swiperOptions" class="banner"> <swiper-slide v-for="value in banners" :key="value.bannerId" c
【vue-awesome-swiper】vue-awesome-swiper设置loop:true不起作用
Owen的博客
11-06 992
一、问题描述 开始用本地数据，轮播正常；后来用接口数据，就不能循环滑动了。 二、问题原因 页面渲染的时候，数据未加载完成。 三、解决方案 方法1、 v-if="list.length" <swiper ref="mySwiper" :options="swiperOption" v-if="list.length"> <swiper-slide v-for="item of list" :key='item.id'> <img
解决vue-awesome-swiper时异步获取造成 滚动条失效问题
weixin_43653691的博客
01-28 1273
因为获取图片时滚动条已经加载完成，无法得到真正滚动条长度而出现了错误 解决方法： Recommend 因为Scroll 组件是在 Home父页面中，故recommend组件在完成数据获取后要把状况告诉父组件，故使用了子穿夫 故使用了 自定义事件进行传递 recommend //异步获取完成后使用 this.$emit自定义事件进行传递 getHomeRecommend(this.curPage)...
解决vue中使用swiper的loop循环失效和路由跳转回来后自动轮播失效需要手动滑动才能重新开始轮播
qq_37705048的博客
04-23 6847
vue中使用v-for循环加载swiper的组件时 <div class='swiper__content'> <swiper :options="swiperOption" ref="mySwiper" class="swiper__content-item"> <swiper-slide class="swiper-list" ...
Vue项目中使用swiper时的loop:true失效
xiamoziqian的博客
12-13 548
问题描述： 在写vue项目的时候轮播用到swiper插件，里面有一个loop属性设置为true时，会循环轮播，一开始是自己本地模拟的数据是可以实现的，但是当调用接口获取来的数据发现并不能循环播放 原因： 本地模拟的假数据是一直存在的，而后台获取的数据，页面dom一开始渲染的时候数据是为空的，所以导致不能循环播放 解决办法： 当获取到数据的时候再渲染dom生成即可。 这里加一个判断 v-if="ho...
vue2中使用swiper动态遍历数据时出现不轮播的情况
熟悉JS拼写的FE
09-14 1134
Vue2项目中使用Swiper5出现BUG 前言:我们再开发项目时，难免会用到一些炫酷的轮播图，目前提供较好功能并且多端兼容的就有Swiper，版本目前是4-6，常用的是swiper5，swiper是刚刚出来的最新版本(附上Swiper官网），我这里是使用5版本遇到的动态数据后不轮播的bug 1. 去Swiper找到自己想要的配置项 根据自己项目需求找配置项 2. 这是我需要的swiper配置(修改bug之前) 提前下载npm install swiper data中的ban
vue-awesome-swiper动态数据轮播无效
qq_38835219的博客
01-28 252
swiper容器那v-if判断一下，是否有数据可以解决v-if="(asset.list).length>1" {{asset.ASSETS_CATEGORY_NAME}}资产数： {{asset.ASSET_COUNTS}}
swiper动态加载数据问题，轮播失效问题（配置失效问题）
qwyio的博客
03-14 651
相信小伙伴们刚开始有swiper轮播图也会遇到和我一样的问题：加了属性效果出不来 npm install swiper vue-awesome-swiper --save 默认下载的swiper是目前最新的 8+ 版本 而swiper的api文档目前支持的是 Swiper(4-7)的配置选项 ...
vue项目中swiper动态更新后无法轮播问题 附带案例代码
热门推荐
码农笔录-微信公众号博客
03-08 1万+
swiper是很常用的一个组件，我项目中用到的版本是4.1.6。刚开始，我就按照官网的案例写了个demo，当然图片都是静态写死的，确实可以轮播了，但是我项目的需求是要动态修改轮播图的内容。然后我就改成vue的方式了，js和css是通过cdn引入的。下面是swiper的全部代码： 有问题请加群交流java群：200909980，vue群：128806068 ，或者在下边评论 vue tem...
vue-awesome-swiper动态改变轮播时间
05-28
要动态改变vue-awesome-swiper的轮播时间，你可以使用以下步骤： 1. 在你的Vue组件中引入vue-awesome-swiper，并设置轮播参数： ``` <swiper :options="swiperOption"> <!-- slides --> </swiper> import {...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值