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

最新推荐文章于 2024-09-04 14:08:33 发布
最新推荐文章于 2024-09-04 14:08:33 发布
阅读量708 收藏 1
点赞数
分类专栏： Vue 文章标签： javascript es6 npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyyo_cd/article/details/121648762
版权

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

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

 

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

 

 

lyyo_cd
关注
专栏目录
vue组件中swiper没有生效或者发生错误
weixin_43905830的博客
05-06 1150
先介绍下自己遇到的问题，当我点击景点图片时，界面会弹出一个轮播图，里面展示的是景点的照片，当我点击轮播图任意地方轮播图会消失重新回到原来界面，但是当我点击景点进去轮播图时，轮播图就出现问题下面的paginationType没作用了，最后查资料才知道当重新加载进入轮播图时会出现swiper宽度计算错误，解决的方式就是加上 { observer:true, //修改swiper自己或子元素时，自动初始...
vue中使用vue-awesome-swiper做轮播 ，手动滑动、vue-router路由跳转和动态更新数据，导致自动轮播失效问题
qq_35893561的博客
02-25 3711
vue中使用vue-awesome-swiper做轮播 ，手动滑动和vue-router路由跳转，导致自动轮播失效问题前言问题一：手动滑动后，自动轮播失效问题二：vue-router路由跳转后再回到轮播图页面 前言 在做vue项目中使用vue-awesome-swiper插件做轮播图时，遇到的两个自动轮播失效问题，记录下来，也给遇到同样问题的小伙伴一个参考。 问题一：手动滑动后，自动轮播失效 sw...
vue-awesome-swiper4 轮播无效问题
weixin_36508680的博客
12-31 372
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 问题
最新发布
NiHao___的博客
09-04 376
2.在开启loop后 点击SwiperSlide切换 后乱跳。
vue-awesome-swiper autoplay (自动轮播)不生效 解决 方案
gongzuoyongde的博客
11-30 5779
仅针对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 700
问题描述: 在开发过程中可以选择各种轮播插件来实现轮播功能。 在使用vue-awesome-swiper 这个轮播插件时，动态绑定的数据后不可循环。 轮播功能描述： 1.在界面中显示3张图片 2.选中的图片在中间其放大显示 3.循环轮播、不自动轮播 4.默认选中第一张图片 5.切换图片时，获取对应图片的下标 list: [], //页面所有数据 //轮播设置 swipe...
Vue轮播，vue-awesome-swiper动态数据渲染，首次各种配置无效，轮播图没有效果。
Sodaxiang的博客
04-18 874
在做vue项目时，使用vue-awesome-swiper首页轮播，banner图数据从服务器端加载；但发现使用的过程中轮播图不起作用，没有生效。 分析： 轮播图的数据是由父组件网络请求之后得到的，在用子组件打印swiper的数据的时候，发现是[]，此时并没有拿到网路请求的数据，所以会导致轮播图无效果，只默认显示第一张图片。 解决： 在父组件渲染轮播图组件的时候，加一层v-if判断，当有轮播图数据的时候再进行轮播图组件的渲染，就可以解决该问题了。 <index-swiper ...
解决vue-awesome-swiper时异步获取造成 滚动条失效问题
weixin_43653691的博客
01-28 1227
因为获取图片时滚动条已经加载完成，无法得到真正滚动条长度而出现了错误 解决方法： Recommend 因为Scroll 组件是在 Home父页面中，故recommend组件在完成数据获取后要把状况告诉父组件，故使用了子穿夫 故使用了 自定义事件进行传递 recommend //异步获取完成后使用 this.$emit自定义事件进行传递 getHomeRecommend(this.curPage)...
使用vue-awesome-swiper不能自动轮播
front的博客
11-27 1456
问题 图片不能自动轮播 原因 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：轮播图自动轮播到最后一页就不轮播了？
即使萍水也不要相逢的博客
02-25 2012
项目场景： 在开发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异步加载数据出现的bug问题
08-27
在实际开发中，使用Vue Awesome Swiper异步加载数据时，经常会遇到一些bug问题，例如首屏自动跳过、不能自动轮播等问题。这篇文章将详细介绍这些问题的解决方案，并提供了详细的代码示例。 一、Vue Awesome Swiper...
vue中swiper初始化问题_vue中使用vue-awesome-swiper遇到的一些问题
weixin_33520865的博客
02-05 3245
最近开发pc官网，用到了轮播图，在这里记录一下使用过程中遇到的问题。之前用jquery开发项目的时候，用的是swiper3。现在用vue开发，我一开始尝试用了最新的swiper6，我把官网的demo里的代码复制过来，结果发现要不是下标小圆点失效，要不就是切换功能失效，不知道问题出在哪里。搞了很久，最后用了swiper3的使用方法。轮播图引入的版本是"vue-awesome-swiper": "^2...
解决vue中使用swiper的loop循环失效和路由跳转回来后自动轮播失效需要手动滑动才能重新开始轮播
qq_37705048的博客
04-23 6602
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 506
问题描述： 在写vue项目的时候轮播用到swiper插件，里面有一个loop属性设置为true时，会循环轮播，一开始是自己本地模拟的数据是可以实现的，但是当调用接口获取来的数据发现并不能循环播放 原因： 本地模拟的假数据是一直存在的，而后台获取的数据，页面dom一开始渲染的时候数据是为空的，所以导致不能循环播放 解决办法： 当获取到数据的时候再渲染dom生成即可。 这里加一个判断 v-if="ho...
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
vue-awesome-swiper动态数据轮播无效
qq_38835219的博客
01-28 219
swiper容器那v-if判断一下，是否有数据可以解决v-if="(asset.list).length>1" {{asset.ASSETS_CATEGORY_NAME}}资产数： {{asset.ASSET_COUNTS}}
swiper动态加载数据问题，轮播失效问题（配置失效问题）
qwyio的博客
03-14 599
相信小伙伴们刚开始有swiper轮播图也会遇到和我一样的问题：加了属性效果出不来 npm install swiper vue-awesome-swiper --save 默认下载的swiper是目前最新的 8+ 版本 而swiper的api文档目前支持的是 Swiper(4-7)的配置选项 ...
vue-awesome-swiper动态改变轮播时间
05-28
要动态改变vue-awesome-swiper的轮播时间，你可以使用以下步骤： 1. 在你的Vue组件中引入vue-awesome-swiper，并设置轮播参数： ``` <template> <swiper :options="swiperOption"> <!-- slides --> </swiper> </template> <script> import { Swiper, SwiperSlide } from 'vue-awesome-swiper' export default { components: { Swiper, SwiperSlide }, data() { return { swiperOption: { loop: true, autoplay: { delay: 5000, // 默认轮播时间为5000ms }, } } } } </script> ``` 2. 在mounted钩子中获取Swiper实例，并保存在data中： ``` <script> export default { data() { return { swiper: null, swiperOption: { loop: true, autoplay: { delay: 5000, }, } } }, mounted() { this.swiper = this.$refs.mySwiper.$swiper } } </script> ``` 3. 在需要改变轮播时间的方法中，调用Swiper实例的autoplay.stop()方法停止自动轮播，然后修改swiperOption中autoplay.delay的值，并调用autoplay.start()方法重新开始自动轮播： ``` <script> export default { methods: { changeDelay(newDelay) { this.swiper.autoplay.stop() this.swiperOption.autoplay.delay = newDelay this.swiper.autoplay.start() } } } </script> ``` 这样就可以动态改变vue-awesome-swiper的轮播时间了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值