vue2、vue3中使用swiper

2024-05-05 23:45:19

两个项目中需要使用轮播图，恰好一个是vue2的，一个是vue3的，使用swiper过程中踩了很多的坑，总结一下。

一、vue3中使用swiper

vue3中使用swiper，对应版本为7-8，整个过程几乎对着文档，没有太多的坑，注意下版本就行了，因为7和8有些细微差异。
官方API为https://swiperjs.com/vue
具体步骤为：

npm i swiper
vue页面结构代码

3.script代码

tip：不同功能需要引入对应的依赖，比如我这里需要自动轮播，引入了Autoplay
4.setup里别忘了return

二、vue2中使用swiper

swiper在vue2与vue3里使用的版本分界线是swiper6，也就是vue2中使用swiper6及其一下版本，npm版本记录中，我选用了下载次数较多的5.4.5，中文文档APIhttps://www.swiper.com.cn/api/index.html
具体使用如下：
1.npm i swiper@5.4.5
2.vue页面结构

tip：我这里使用的5版本，最外层div的class还是swiper-container
3.初始化function

上述截图就是遇到的最大的两个坑，截图一对应的nextTick里调用，解决问题是无限循环轮播失效问题。百度查询了很多的文章，对应loop失效，很多都是在swiper标签上加上v-if，但是我这里是5版本，还是div标签，尝试了v-if，v-show都不生效，最后是在nextTick里调用，这样就是在dom结构生成之后，再去初始化swiper，这样就能衔接上，无限轮播了。
第二个坑为截图2中observer对应的三个属性，因为轮播的每个item高度都是自适应的，我设置了autoHeight未生效，网上给出的方案大多数没有加observeSlideChildren： true，所以即便加了前两个，整体样式还是有问题。
总结以上：1.nextTick解决loop无效问题；2.observeSlideChildren： true解决autoHeight失效问题！

vue2、vue3中使用swiper相关推荐

vue3中使用swiper完整版教程
介绍在 vue3 中使用 swiper, 实现轮播图的效果:如果组件样式等模块引入不当,很有可能导致,页面无效果:或者想要的箭头或者切换效果异常问题.具体使用方式如下所示: 使用方式使用命令 np ...
Vue watch监听详解，一篇文章彻底搞懂Vue2/Vue3中的watch监听
watch监听在vue2和vue3中的用法详解(全) Vue2中的watch用法 Vue3中的watch用法首先写一个vue页面 <template><div><h1& ...
vue3中使用swiper.js实现轮播功能
vue3中使用swiper6实现轮播 vue用的3.0版本,swiper用的swiper6 安装Swiper // "swiper": "^6.7.5",npm ...
vue3中使用 swiper 插件，自定义切换按钮，将前进后退、左右切换按钮放到容器外部
今天在使用 swiper 时,遇到一个坑爹的问题. swiper 组件的本来样式长这样: 左右切换的按钮在滑动容器内部,但是我们想要它跑到容器外面去. 网上找了一堆方法都不好使也不知道是不是因为 ...
黑马前端Vue2+Vue3全套视频教程上新！500+集资源免费领
互联网发展至今,前端工程师以其高需求量和高薪酬成为IT行业职场新贵. 走进现代前端开发行业,播妞发现,每一位前端开发人员都面临着一个重要决策,选择一个合适的框架. 这时,更符合时代大势所趋的前端框架 ...
在vue2、vue3中基于Three.js使用多张全方位照片拼接全景vr效果
在vue2.vue3中基于Three.js使用多张全方位照片拼接全景vr效果 Vue3 代码如下(示例): <template><div class="Create&quo ...
[VUE3]vue2.x中slot-scope插槽在vue3.x中的写法(以elementPlus和AntDesign为例)
[VUE3]vue2.x中slot-scope插槽在vue3.x中的写法 elementUI vue2.x的写法 <el-table-column label="测试" al ...
vue2.x中slot-scope插槽在vue3.x中的新写法
vue2.x中slot-scope插槽在vue3.x中的新写法 1.vue2.x的写法 <el-table-column label="测试" align="cen ...
vue2、vue3中自定义v-model的使用和区别
在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据.视图更新,v-model是一个语法糖,,我们可以 ...

最新文章

热门文章