vue中使用swiper页面不滑动，swiper中的js不生效的问题解决

最新推荐文章于 2024-07-15 18:43:38 发布
最新推荐文章于 2024-07-15 18:43:38 发布
阅读量3.5k 收藏 1
点赞数 7
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46613478/article/details/106211004
版权
本文介绍了在Vue项目中使用swiper插件时遇到的页面不滑动和js不生效的问题，强调了解决方案是在created钩子中通过setTimeout延迟初始化swiper组件，以确保组件正确渲染。
摘要由CSDN通过智能技术生成

如何在vue中使用swiper插件

1、前言

今天用vue3.0写项目的时候，想要用swiper插件做轮播。其实之前我也用过，也遇到这个问题，但是我记性不好，就把这个关键的问题又忘记啦，今天又遇到这个坑，所以打算记录一下，以免自己以后又忘记。

我们在vue中使用swiper的时候，一定要用setTimeout来初始化swiper组件。这也是我们经常遇到的一个坑。如果用的轮播比较简单，其实elementUI里面自带的走马灯也是不错的选择。

2 、安装方法

// 使用指令安装
npm i swiper@3.4.2 -S

3、加载插件

加载js
//在你需要引入swiper的页面加载js插件
import Swiper from "swiper"

最低0.47元/天 解锁文章
jingjinglove-
关注
vue-awesome-swiper滑动失效的问题解决方案
心若向阳，无谓悲伤的博客
03-04 6190
最近在做项目的时候遇到这样一个问题，就是在vue项目的不同页面使用了swiper插件后，导致其他界面的swiper插件失效，最终摸索了一天终于解决了。 我遇到的情况是这样的，在界面A中，使用这种定义变量式的方式来初始化swiper. var mswiper = new Swiper('.swiper-container', { effect : 'coverflow', ...
有关swiper放入项目中,不滚动,只能显示第一张图片的问题
aiiit的博客
02-26 2902
有关swiper放入项目中,不滚动,只能显示第一张图片的问题 出现问题的原因:因为swiper提前初始化了，那个时候还没有数据，当数据调出来时已经没用了，所以有以下几个解决方法： 1.加载组件时加v-if判断: ...
【Vue】vue2 vue-awesome-swiper 刷新无法自动滚动解决
最新发布
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
07-15 326
【代码】【Vue】vue2 vue-awesome-swiper 刷新无法自动滚动解决。
vue3中使用 swiper无法滑动
xiaobaicai_666的博客
09-05 846
vue3中没有this指向；new swiper的时候增加这两个配置即可正常滑动 { observer: true, observeParents: true }
vue使用swiper 不自动滚动、轮播，swiper.css 找不到，swiper等问题
LingHuzh的博客
10-13 2694
在这简单说一下我在项目中使用swiper遇到的坑 我们先来看一下swiper官网 大家可以看到哈，swiper已经出到6了！！！！ 想必在家在安装的时候直接命令 cnpm i swiper ， 一通回车，在mian里面 import ‘swiper/css/swiper.css’ ，嗯，我也是这样的 结果运行报错，说找不到swiper.css 然后开始百度，换成了 import ‘swiper/swiper-bundle.css’; 好了，成功运行起来了，结果发现是不报错了，可swiper它也不.
vue3 ts swiper-slide不能滑动
weixin_44790305的博客
10-30 368
地址：{{ item.ip }}
vue swiper动态获取数据无法滑动问题
weixin_45359072的博客
06-08 1438
简述： 使用swiper插件时，需要通过接口获取图片路径、图片名称等，会出现无法滑动或空白的现象。原因是swiper在获取接口之前初始化，这样渲染的是没获取图片之前的页面。 解决方法一：再用接口调出数据后，初始化swiper <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="bas
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
12-08
在尝试解决问题的过程中，我们可能会将初始化Swiper的代码放在Vue组件的`created`或者`mounted`钩子中。但如描述中所述，这样做可能并不能解决问题，因为`created`钩子是在模板编译之前调用的，而`mounted`虽然保证...
解决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+vue-awesome-swiper实现滑动选择
Kätzchen-408的博客
07-27 1839
vue使用swiper+vue-awesome-swiper实现滑动选择踩坑提示1.源文档使用原生编写,不能直接写在vue里解决方案2.兼容性问题实现 先上效果图: 踩坑提示 1.源文档使用原生编写,不能直接写在vue里 swiper的文档写的太简陋了,虽然兼容vue,但是文档中给的样例是用原生html写的,把vue组件名放到样式类中了.原文档中,我要实现的功能的样例代码是这样: <!DOCTYPE html> <html lang="en"> <head> &l
vue中使用Swiper划不动现象解决办法
wangpachong的博客
11-21 2133
Swiper实例化 new Swiper(".home-banner",{ loop:true, pagination:{ el:".swiper-pagination" } }) **这时候会出现...
vue中动态添加swiper，滑动效果不起作用
1234567~~
05-30 7229
vue中动态添加swiper，滑动效果不起作用在页面开发过程中，slide的数据经常是需要动态获取然后赋值，但这个时候dom已经渲染完成，所以，页面上的slide并没有更新碰到这个问题的小伙伴，看来还是没把swiper深究。其实swiper的开发者早就想到这个问题了，有时间可以看下swiper的开发文档：  http://www.swiper.com.cn/api/observer/218.htm...
vue swiper不滚动 解决方法 $nextTick
weixin_44166439的博客
02-05 1674
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vu.
关于swipper 无法正常滑动的问题
qq_41304029的博客
09-10 817
所以应该等待数据获取到并且界面更新完成后才进行设置轮播图。swipper 需要根据多少个slide进行计算滑动。
swiper 无法滑动原因及解决方法
绥兮的博客
11-24 9489
原因： swiper在初始化的时候就在swiper-wrapper下生成了已确定的swiper-slide的个数，如果数据不是初始化的时候就确定的，是异步获取的，就会导致无法滑动 解决方法： 1. 获取数据后再对swiper进行初始化 var reportHtml = ''; $.ajax({ type: "get", url: url, dataType: "json", success:function(data){ $("#reportList
vue swiper动态获取数据不滑动的解决方案
程序员小曲的博客
04-15 819
因为vue中更新 DOM 时是异步执行的， data() { return { imgArray: [] //轮播图片 } }, created() { this.getImgArray() }, mounted() { new Swiper('.swiper-container', { loop: true, // 循环模式选项 // 如果需要分页器...
vue中使用swiper
06-07
在Vue中使用Swiper，可以按照以下步骤进行： 1. 安装Swiper 在终端中使用npm命令安装Swiper： ``` npm install swiper --save ``` 2. 引入Swiper 在需要使用Swiper的组件中，通过import语句引入Swiper： ``` import Swiper from 'swiper' import 'swiper/css/swiper.css' ``` 其中，第二行代码是引入Swiper的样式文件。 3. 初始化Swiper 在组件的mounted钩子函数中初始化Swiper： ``` mounted () { new Swiper('.swiper-container', { // Swiper的配置参数 }) } ``` 其中，`.swiper-container`是Swiper容器的类名，Swiper的配置参数可以根据需要进行设置。 4. 编写Swiper容器 在组件的template中，编写Swiper容器： ``` <template> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- Swiper的内容 --> </div> </div> </template> ``` 其中，`.swiper-wrapper`是Swiper的内容容器，可以在其中编写Swiper的内容。 5. 完整代码示例 ``` <template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <!-- Swiper的内容 --> </div> <div class="swiper-slide"> <!-- Swiper的内容 --> </div> <div class="swiper-slide"> <!-- Swiper的内容 --> </div> </div> </div> </template> <script> import Swiper from 'swiper' import 'swiper/css/swiper.css' export default { mounted () { new Swiper('.swiper-container', { // Swiper的配置参数 }) } } </script> <style> .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* required swiper properties */ flex: 1; justify-content: center; align-items: center; } </style> ```
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值