vue中使用swiper的问题

最新推荐文章于 2024-07-08 05:06:13 发布
最新推荐文章于 2024-07-08 05:06:13 发布
阅读量289 收藏
点赞数
分类专栏： 遇到的bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/edc666/article/details/104670066
版权

发现使用的swiper插件经常性出现一个问题，就是不知道什么时候开始，loop就失效了。即不能循环。

百度后发现是因为使用了缓存的原因。 loop设置为true 则开启loop模式。loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的， 可是在vue的v-for中时，异步加载的数据都还没有返回时，就先加载了Swiper组件并复制了sliper，导致loop失效

解决办法,swiperList是axios获取到的数据

<div class="wrapper" v-if='swiperList && swiperList.length > 0'>
edisonMamba
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中使用swiper
weixin_44986077的博客
12-12 383
最近在研究vue的周边技术，发现swiper，在官网中也有说明要如何进行操作，下面我进行进一步的总结 首先在终端进行 npm install vue-awesome-swiper --save 在main.js中引入一下代码 import Vue from 'vue' import 'swiper/dist/css/swiper.css' import VueAwesomeSwiper from...
vue 中使用swiper
qq_33159000的博客
03-31 528
1.安装： npm install swiper --save-dev 2. 引入(不同的版本，css和js的路径不太一样，5.x以前的版本是在/dist下) import Swiper from "swiper"; import "swiper/js/swiper.min.js"; import "swiper/css/swiper.min.css"; 3.实例化swiper 对象 var that = this; const swiper = new Swi..
Vue使用Swiper
12-13
Vue使用Swiper先用小黑板npm i swiper 然后 引入 import Swiper from 'swiper' import '../../node_modules/swiper/dist/css/swiper.min.css'
Vue中使用Swiper
kakarotte007的博客
03-24 631
Vue中使用Swiper首先 下载所需要的包在main.js中引入在banner区域写好html结构使用挂载完成阶段的钩子函数注：如果想要使用多个swiper，可以写多个new Swiper 首先 下载所需要的包 npm install swiper@3 --save-dev // 我这里使用3.0版本 在main.js中引入 import 'swiper/dist/css/swiper.min.css' import Swiper from 'swiper' 在banner区域写好html结构 &l
vue中使用Swiper
最新发布
qq_43422957的博客
07-08 275
这是一个多图滚动的案例，如需要其他的轮播效果，在swiper官网拷贝相关js代码替换即可。本文首发于公众号【雪天前端】，欢迎关注！
解决vue中使用swiper插件问题及swiper在vue中的用法
10-18
解决Vue中使用Swiper插件的问题，首先要正确引入Swiper库。有两种常见方式： 1. 直接引入CDN或本地静态资源： 如上述示例中，通过`import Swiper from "../../static/js/swiper-3.4.0.min.js"`引入Swiper的...
vue使用原生swiper代码实例
10-15
在介绍如何在Vue项目中使用原生Swiper实现轮播效果之前，我们先来了解一些基础知识点。 Vue.js 是一种用于构建用户界面的JavaScript框架，通过声明式的渲染、组件化开发、数据双向绑定等特点，使得Vue在前端开发中...
vue2.0使用swiper组件实现轮播效果
12-29
轻松实现vue2.0轮播效果，供大家参考，具体内容如下 1、安装swiper npm install swiper@3.4.1 --save-dev 2、引用组件 import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; 3、html页面代码...
vue-swiper
未玄的博客
11-08 204
引入 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper) 使用 &lt;div class="slider"&gt; &lt;swiper :options="swiperOption" ref=...
vue swiper
u013361179的博客
02-22 465
npm install swiper vue-awesome-swiper --save vue swiper
vue使用swiper
qq_43526925的博客
12-15 166
1.编译器: vscode 2.调试浏览器chrome swiperAPI文档：link 配置环境 npm install swiper@5.x vue-awesome-swiper --save 5.x下载的swiper的版本为5.4.5 <template> <div id="app"> <swiper :options="swiperOption" id="swiper-container"> <swiper-slide>&lt
在Vue中使用Swiper
小葵坤_易安的博客
07-25 3630
插件使用教程：https://github.com/surmon-china/vue-awesome-swiper 安装：cnpm install vue-awesome-swiper --save-dev
在vue中使用swiper
weixin_46500485的博客
11-10 142
下载之后引入这些文件 在组件中使用
在vue中使用Swiper
yxm_136452789的博客
03-01 1875
最近在学习vue,给大家分享一下，swiper在vue中的使用（两种方法）。 一，直接安装swiper 1，在项目根目录下，安装swiper npm install swiper --save 或淘宝镜像下的 cnpm install swiper --save 出现版本号，即安装成功 2,在需要使用轮播的vue页面，导入swiper css import Swiper from 'swi...
vue中使用swiper slide
08-26
在Vue中使用Swiper Slide，你可以按照以下步骤进行操作： 1. 首先，安装Swiper库。你可以通过npm或者yarn来安装Swiper，运行以下命令来安装： ``` npm install swiper --save ``` 或者 ``` yarn add swiper ``` 2. 在需要使用Swiper Slide的组件中，引入Swiper和Swiper Slide的样式。你可以在组件的`<script>`标签中引入Swiper，以及在组件的`<style>`标签中引入Swiper的样式，示例如下： ```javascript import Swiper from 'swiper' import 'swiper/css/swiper.css' ``` 3. 在组件的`<template>`标签中，使用Swiper Slide组件。你可以将Swiper Slide包裹在Swiper的容器中，并根据需要设置各种属性，示例如下： ```html <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> Slide 1 </div> <div class="swiper-slide"> Slide 2 </div> <div class="swiper-slide"> Slide 3 </div> </div> </div> </template> ``` 4. 在组件的`<script>`标签中，初始化Swiper。你可以在组件的`mounted`生命周期钩子函数中初始化Swiper，并根据需要设置各种配置选项，示例如下： ```javascript export default { mounted() { new Swiper('.swiper-container', { // 配置选项 }) } } ``` 这样，你就可以在Vue中成功使用Swiper Slide了。你可以根据需要自定义样式和配置选项来满足具体的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值