在vue中使用swiper组件的一点问题

Swiper与Vue性能优化
最新推荐文章于 2025-07-23 09:45:18 发布
最新推荐文章于 2025-07-23 09:45:18 发布
阅读量487 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c831fe2e51d451d0d1282c3
在使用Swiper组件与Vue框架结合的项目中，遇到页面卡顿问题，特别是在输入框输入时，发现Swiper组件导致页面回流，通过将Swiper组件独立为单文件组件，解决了性能瓶颈。

最近公司项目中用到了swiper组件，项目用的vue搭建的，其实一开始是打算自己写的，但是考虑到项目工程其他地方已经引过swiper，为了不重复造轮子，打算用swiper来做；

需求场景很简单，大致就是这样一个页面结构

顶部通知栏轮播用的swiper，通过接口拉到的数据来上下滚动轮播

下方有一个手机号的表单提交

结果问题就出在这里

当我输手机号的时候，页面会特别卡，每输入一个数字都会很卡，数字进入input都会有延迟

后来用Chrome的调试工具找了很久，发现问题出在swiper上，

由于我的swiper组件和下面的内容使写在一个页面组件里的,每次我在input里输入一个字符时，都会触发一次swiper的重新计算，造成页面的回流，导致卡顿。

解决办法 后来我将swiper抽出来做一个单文件vue组件，这样，我再操作input的时候，swiper组件不会触发相应的更新了，页面正常了。

这个问题应该是在swiper和vue的数据渲染机制造成的，具体原因还需要自己再去琢磨，总而言之分享一下自己的一点心得。

转载于:https://juejin.im/post/5c831fe2e51d451d0d1282c3

在 Vue 中使用Swiper组件
qq_45164496的博客
10-06 4054
第一步：在终端执行命令： npm install vue-awesome-swiper --save npm run dev 如下： 第二步：进入 main.js 文件，三行代码引入Swiper组件 第三步：在需要轮播图的文件中使用Swiper组件，Swiper.vue 文件内容如下： <template> <!-- 轮播图开始 --> <div...
vue中使用swiper插件
H-rosy的博客
08-16 9798
OK今天给大家介绍一下vue2中使用swiper插件，以及在使用中需要的问题，比如说在使用时轮播图失效的情况的解决。由下图可以看到现在swiper已经更新到了8版本了，但是需要注意的是5以上的版本是为了vue3服务的，使用时多多少少会有谢问题。如果感兴趣的话可以看看官网的介绍。这里我先给出官网介绍的使用步骤，但是它是在html中使用的并且在vue2中使用也有点问题初始化：这里需要说明的是我这里是将轮播图组件Carousle单独抽离出来封装的。OK这里需要注意的是官网中最外层包裹轮播图的div的类名是swip
Swiper 在 Vue 中的使用指南
jingling555的博客
04-28 1746
模板部分：使用swiper和swiper-slide组件创建轮播结构 导入模块：导入 Swiper 核心组件、需要使用的模块（如分页、导航）以及相关样式 配置参数：在 setup 函数中配置 Swiper 的模块和参数 样式设置：为 Swiper 容器和滑动项设置基本样式
告别踩坑！Vue集成Swiper的详细教程和常见问题解决
最新发布
鹏多多的博客
07-23 2265
本文介绍了如何在Vue项目中集成Swiper轮播库。针对Vue2和Vue3版本，分别推荐使用vue-awesome-swiper插件和Swiper7+原生支持。详细讲解了两种环境下的安装配置方法、基础用法实现，以及分页器、导航按钮等功能的设置。文章还提供了自定义样式的方案，帮助开发者快速实现美观的轮播效果。对于需要轮播功能的Vue项目，本文提供了全面的技术指导，从基础配置到高级定制一应俱全。
vue swiper卡顿
leng0920的博客
08-22 3284
https://www.cnblogs.com/jf-67/p/9679987.html
vue使用swiper轮播组件遇到的坑
喋喋的前端之路
08-06 4030
vue中swiper轮播组件使用问题由来（1）普通版本（2）组件版本引入和使用下载引入CDN引入npm安装全局引入组件引入全文总结 问题由来 工作中需要使用轮播图，自己写的话耽误太多时间，使用插件最好，目前比较稳定好用的轮播插件swiper就这么被选了，不想看英文于是打开了中文文档，这也是坑的由来。 建议不要看中文文档，更新太慢，现在目前的swiper版本已经到达6，直接使用npm安装的也会是最新版，中文文档只更新到4，意味着没法参考使用方法，有问题网上也找不到。在此附上英文API=>swiper英文
在Vue中使用swiper时，轮播页面一直卡在某个页面轮播的解决办法
Yukinoshita_kino的博客
08-20 1511
一. 问题 Vue项目中使用了vue-awesome-swiper轮播插件，配置好一切参数后，出现了一个问题，轮播图一直卡在第二页滑动。 轮播图参数如下： data() { return { swiperOption: { pagination: { el: '.swiper-pagination', bulletClass : 'my-bullet-swiper', // 自定义设置默认类名 bullet
vue2.0使用swiper组件实现轮播效果
08-28
安装了 Swiper 之后，我们需要在我们的 Vue 组件中引用它。我们可以使用以下代码来引用 Swiper： ``` import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css'; ``` 这将引入 Swiper 组件和其样式...
解决vue中使用swiper插件问题及swiper在vue中的用法
10-18
在Vue组件中使用Swiper，通常在`mounted()`生命周期钩子中初始化Swiper实例，因为此时组件已经被渲染到DOM中。例如： ```javascript mounted() { this.$http.get(...
vue2.0使用swiper组件实现轮播的示例代码
08-27
在本文中，我们将探索如何使用swiper组件在Vue 2.0中实现轮播的示例代码。swiper是一个功能强大且灵活的轮播插件，广泛应用于移动端和桌面端的开发中。下面，我们将逐步讲解如何安装swiper、引用组件、编写HTML页面...
vue中Swiper动态渲染swiper-slide后轮播图呆滞划不动的问题
smile的博客
07-25 1163
因项目开发中很多都有用到轮播图的地方，然后选择用了swiper，记录一下，之前一直没有发布这个文章，现在官方好像已经优化了这个问题。因为this.mySwiper中没有值导致的，需要进行swiper初始化一下。问题描述：在图片滑动时，卡住不动了。下载引入，具体参考官方文档。
vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题
m0_38075171的博客
08-24 3629
vue项目中，在安卓手机上swiper轮播切换时视频与图片出现卡顿切换问题 做项目的时候发现一个问题，在ios上切换很流畅，但是安卓手机就很卡顿，解决了半天，记录一下 功能：顶部有视频和图片的轮播图切换，无自动轮播，手动滑动切换 操作：发现视频与下一张图片切换时，视频的当前画面会卡顿 解决：触发滑动事件的时候，把视频标签隐藏，换成图片进行切换 具体代码 html <div class="mySwiper"> <swiper ref="mySwiper" style="hei
vue项目中如何使用使用swiper
热门推荐
piaoyecanfeng的博客
04-22 3万+
一、在vue项目中安装swiper npm install swiper -S 二、在main.js中引入swiper.css import Vue from 'vue'; import "swiper/swiper.min.css" 三、在需要使用swiper的组件中引入swiper ，swiper必须放到mounted里 否在无效 <script> import Swiper from 'swiper'; export default { name: 'HelloWorld',
vue3中swiper的使用
work_fei的专栏
06-30 3468
vue3中swiper的使用,注意版本的问题
【Vue】vue2项目使用swiper5.4.5轮播图2024年1月5日实战保姆级教程（已过时）
qq_51055690的博客
08-21 1万+
swiper轮播图官网参考文章，最好先看完他的介绍，再看我的。swiper，vue中swiper的应用，swiper各个版本在vue项目中应用官方效果传送门更多效果传送门提示：以下是本篇文章正文内容，下面案例可供参考vue2使用swiper组件组件实战保姆级教程。
面试考哪些，vue3- swiper组件(1)，前端开发攻略
2401_83621499的博客
04-09 1108
如果因为不兼容使用不了封装好的组件，也可以在已经安装好swiper后自己实例化这个操作//我这里用的是这两个版本，并不兼容所以要自己配置//一开始用的是版本6，由于版本太高了有些功能缺配置没有办法使用注意点：Swiper7的默认容器是'.swiper'，Swiper6之前是。完整代码Slide 1Slide 2Slide 3如果需要分页器。
推荐文章：Vue-Swiper —— 打造流畅的轮播体验
gitblog_01101的博客
08-24 365
推荐文章：Vue-Swiper —— 打造流畅的轮播体验 在前端开发中，滑动轮播图是一个常见且实用的功能，尤其是在展示丰富图像或快速导航时。今天，我们为您推荐一款专为Vue.js量身定做的轮播组件——Vue-Swiper，让您的页面交互更加生动、流畅。 项目介绍 Vue-Swiper，正如其名，是基于Vue框架的一个轻量级轮播插件。它设计简洁，功能强大，致力于提供一个易于集成和高度可定制的解决方案...
在vue中引入swiper组件步骤
11-06
在Vue中引入Swiper组件，你需要几个步骤： 1. **安装依赖**: 首先，你需要通过npm或yarn来安装Swiper库。打开终端或命令行工具，运行以下命令： ``` npm install swiper@latest // 使用npm 或 yarn add swiper@latest // 使用yarn ``` 2. **注册插件**: 在你的Vue项目中，通常在main.js文件里注册Swiper的Vue插件，以便在Vue实例中使用。例如： ```javascript import { Swiper, SwiperSlide } from 'swiper'; Vue.use(Swiper); Vue.component('swiper-slide', SwiperSlide); ``` 3. **在模板中使用**: 在你的.vue文件中，你可以像使用其他任何Vue组件一样使用Swiper。创建一个新的div并给它添加`swiper-container`和`swiper-wrapper`的class，然后包含SwiperSlide作为内容： ```html <template> <div class="swiper-container"> <div class="swiper-wrapper"> <!-- 这里可以放多个swiper-slide --> <swiper-slide v-for="slide in slides" :key="slide.id">{{ slide.content }}</swiper-slide> </div> <!-- Swiper控制按钮和其他配置 --> <div class="swiper-pagination"></div> </div> </template> ``` 4. **设置选项**: 在data钩子函数中，你可以定义Swiper的配置项，如自动播放、滑动切换效果等。例如： ```javascript data() { return { slides: [ // 定义一些SwiperSlide的对象 ], swiperOptions: { autoplay: true, pagination: { el: '.swiper-pagination' } } }; }, mounted() { this.$refs.mySwiper.init(this.swiperOptions); // 初始化Swiper } ``` 确保在使用ref引用你的Swiper元素，并调用其init方法。 完成以上步骤后，你应该就能在Vue应用中正常显示Swiper轮播了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值