vue-awesome-swiper

最新推荐文章于 2022-04-21 23:18:32 发布
最新推荐文章于 2022-04-21 23:18:32 发布
阅读量192 收藏
点赞数
分类专栏： Vue 项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smalCat/article/details/83509591
版权

vue-awesome-swiper 自动轮播 无限循环问题 解决

出现问题是因为swiper一开始初始化的时候渲染速度比请求速度快，那时候数据还没有回来，轮播图片也没有回来，这时候swiper就出现了检测不到内容，从而内部的一些js获取不到参数，造成自动轮播和无限循环出错

解决办法为：
在v-for循环的元素上，先检测数据是否有回来，使用v-if，因为请求数据也很快，所以进入页面几乎察觉不到这一判断带来的影响，所以这里我使用了此方法

雨_生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现swiper轮播组件
qq_45752104的博客
10-18 4275
目前市面上有很多轮播组件，但是有的不满足业务需求，因此也需要自己首先轮播组件。以下是一个用vue实现的轮播组件，带动画效果，可以自行设置轮播速度，选择是否需要分页器等。效果如下： 思路： 结构：一个轮播组件应该由三部分组成，一是轮播的元素，如图片等；二是底部的分页器；三是前一张，后一张的按钮； 轮播实现：外层元素有固定的宽度，形成一个展示窗口，内层的轮播元素排列在窗口后面，定时移动内层元素，从而实现轮播。 注意点：当内层元素不断向左移动到达最后一个元素后，下一次移动需要将最后一个元素移动到第一个元素，
vue使用swiper遇到的一些坑分享
fly_xinxin的博客
12-08 2万+
vue swiper 走马灯 H5 闪屏
vue 实现无限向上滚动
DGL_CSDN的博客
02-21 4679
<template> <!-- vue 实现无限向上滚动 --> <div id="box"> <div id="con1" ref="con1" :class="{ anim: animate == true }" @mouseenter="mEnter" @mouseleave="mLeave" > <p v-for="(item, index) in..
vue-awesome-swiper 基本使用及参数说明
热门推荐
想飞的猪的博客
09-14 8万+
vue-awesome-swiper是基于swiper的，安装不同版本的vue-awesome-swiper对应不同的swiper，所以swiper里面的属性多数能应用到vue-awesome-swiper中，也可以根据swiper文档来设置vue-awesome-swiper属性；swiper官方文档：https://www.swiper.com.cn/api/index2.html；在这里我使...
swiper的轮播超快速度切换
nunumaymax的博客
04-21 3960
项目场景： 移动端H5页面使用Swiper插件绘制轮播图 问题描述 使用Swiper插件时，轮播时间明明设置了3s，但是轮播速度超级快 ，1s都不到就要切换下一张图。 swiper初始化代码如下： new Swiper('.analysis-box', { autoplay: isOneMore ? { delay: 3000, disableOnInteraction: false } : false, loop:
vue引入新版 vue-awesome-swiper插件填坑问题
08-28
同时，需要在模板中使用 `<swiper>` 和 `<swiper-slide>` 组件。 解决方案 以下是解决上述问题的解决方案： 1. 在 main.js 文件中引入 `import 'swiper/dist/css/swiper.css'`。 2. 在组件中引入 `import { ...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
<swiper-slide>slide1</swiper-slide> <swiper-slide>slide2</swiper-slide> <!-- 以下控件元素均为可选 --> <div class="swiper-pagination" slot="pagination"> <div class="swiper-button-prev" slot=...
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轮播图插件vue-awesome-swiper
11-28
Vue-Awesome-Swiper 轮播图插件，可以同时支持Vue.js（1.X ~ 2.X），兼顾PC和移动端，SPA和SSR。 例子 例子 安装设置 安装Install vue-awesome-swiper npm install vue-awesome-swiper --save vue挂载 // import ...
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
10-17
说到h5的翻页，很定第一时间想到的是swiper。但是我当时想到的却是，vue里边怎么用swiper。这篇文章主要介绍了vue-awesome-swiper - 基于vue实现h5滑动翻页效果 ,需要的朋友可以参考下
Vue使用swiper实现匀速轮播，中间不停留
NYYandYF的博客
03-24 3638
最终实现效果： 提示：使用前记得先下载引入 Swiper 呦！！！ vue HTML中放入 <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide style="margin-right: 0px;" v-for="(items,indexs) in listImg" :key="indexs"> <img :src="items.url" alt=""> </swiper-sli
vue swiper 滑动切换slide时，导致setInterval卡顿，附带解决方法
Vintage
12-26 4664
 具体现象如下图，可以看到，每次滑动slide或者通过导航箭头切换slide的时候，上方的倒计时总是在slide结束后卡顿0.3s左右的时间。  在导航箭头上，在每次执行slide滑动后，都有一个v-show的判断是否到达slide的尽头，然后分别决定他们是否显示。我的部分代码如下图，我会将一些相关的圈出来： 在图中，红框部分是用来判断导航箭头是否显示的 ，我发现在这里他们会导致动图中...
vue-awesome-swiper 中的自动轮播时间控制
走在秃头的路上的博客
02-19 1万+
在用vue-awesome-swiper时 ，想让图片自动轮播 加了auto play：true 后，轮播是轮播了，但是速度非常快，给它加了delay 也不起作用，最终发现只要在autoplay后面加个时间就行了，也就是 autoplay：3000 就能自动轮播且间隔3秒 ...
利用vue-awesome-swiper实现循环轮播图（多张图片显示）
weixin_42164004的博客
08-20 7472
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue-awesome-swiper实现循环滚动列表
weixin_39150852的博客
01-11 3141
安装指定版本cnpm install vue-awesome-swiper@3 --save-dev 在页面中引入插件 <template> <div class="scorllBox"> <div class="scrollnameList"> <p v-for="(item, index) in scorllBoxListName" :key="index">{{ item }}</p> </div&g.
vue-awesome-swiper踩坑：刷新布局错乱
yemuxia_sinian的博客
05-25 9915
vue-awesome-swiper使用传送门，今天使用vue-awesome-swiper做一个数据信息滚动效果的时候，页面加载完后，没出现什么问题，但是一刷新当前页面布局就错乱了，而且loop也失效了。 正确布局如下： 一刷新页面： 网上查了下，发现是加载顺序的问题，因为数据还没有完全加载的时候就已经渲染swiper了。 解决的办法是在初始化的配置选项里面添加一下两个属性就可以...
vue-awesome-swiper使用自动轮播和循环轮播不生效
liuyan55的专栏
02-15 3344
vue-awesome-swiper使用自动轮播和循环轮播不生效(loop和autoplay) 在项目中使用vue-awesome-swiper如果loop和autoplay总是出现各种问题,第一次加载的时候,轮播是不动的,需要重新加载一下swiper才会轮播 解决方案: //轮播设置 swiperOption: { 　　direction: 'vertical', 　　observe...
vue 中使用swiper 【vue-awesome-swiper】无限循环加自动播放时loop属性无效
WO_JIAMIFENG的博客
07-09 2265
vue 中使用swiper 【vue-awesome-swiper】无限循环加自动播放时loop属性无效 解决方案： 1.在数据请求后初始化swiper参数， 2.在要展示的参数有数据之后渲染dom dom渲染 swiper样式引用及循环设置 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值