vue3/vue中使用swiper7/swiper8
在官网找了个功能比较全的代码作为例子，如下
<template> <swiper :modules="modules" :slides-per-view="3" :space-between="50" navigation :pagination="{ clickable: true }" :scrollbar="{ draggable: true }" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide></swiper> </template> <script> // import Swiper core and required modules import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from 'swiper/vue'; // Import Swiper styles import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; import 'swiper/css/scrollbar'; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { const onSwiper = (swiper) => { console.log(swiper); }; const onSlideChange = () => { console.log('slide change'); }; return { onSwiper, onSlideChange, modules: [Navigation, Pagination, Scrollbar, A11y], }; }, }; </script>
我们把它拷到App.vue中全部替换掉之后执行，你会发现报css依赖不存在的错误，
我们打开node_modules文件夹，找到swiper文件夹，你会发现这下路径指向都是不明确的，所以接下来们要手动修改一下路径，
把js的路径换成vue文件夹下的swiper-vue.js
默认基础样式用swiper目录下的swiper.min.css或如果嫌麻烦可以直接用总样式，在swiper目录下的swiper-bundle.css或者压缩版swiper-bundle.min.css，
接着我们打开modules目录，把用到的组件路径都改一下，然后久违的绿它色终于出现了
这是因为官方例子里默认一次显示3个滑块，而例子只有3个swiper-slide，之后就用省略号了
我们把它改成1并且添加点样式后看下效果：
最终的代码：
<template> <swiper :modules="modules" :slides-per-view="1" :space-between="50" navigation :pagination="{ clickable: true }" :scrollbar="{ draggable: true }" @swiper="onSwiper" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script> // import Swiper core and required modules import { Navigation, Pagination, Scrollbar, A11y } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/navigation/navigation.min.css"; import "swiper/modules/pagination/pagination.min.css"; import "swiper/modules/scrollbar/scrollbar.min.css"; /** * 如果嫌麻烦可以把上面的全部样式都删了，直接用总的 * bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等） */ // import "swiper/swiper-bundle.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { const onSwiper = (swiper) => { console.log(swiper); }; const onSlideChange = () => { console.log("slide change"); }; return { onSwiper, onSlideChange, modules: [Navigation, Pagination, Scrollbar, A11y], }; }, }; </script> <style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: pink; } </style>
组件样式修改：
因为vue为了不让单页的样式污染全局，通常会在style标签加上scoped，这就导致了我们无法替换掉组件的样式，所以我们可以用::v-deep把样式抛出去替换到全局的，比方说我们要把swiper的pagination页面小圆点改成白色，那么样式就可以这样写：
<style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: pink; } .swiper::v-deep .swiper-pagination .swiper-pagination-bullet { background: rgb(255, 255, 255); } .swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active { background: rgb(255, 255, 255); } </style>
当然，有些小伙伴会说我要用 CSS 预处理器，比方说scss，那么就可以用:deep()，这样写：
顺便提一下，目前vue3中并不支持最新版的sass，我们可以用4.14.1的 node-sass搭配7.3.1的sass-loader使用
npm install node-sass@^4.14.1 -D
npm install sass-loader@^7.3.1 -D
<style lang="scss" scoped> .swiper:deep() { .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: pink; } .swiper-pagination { .swiper-pagination-bullet { background: rgb(255, 255, 255); } .swiper-pagination-bullet-active { background: rgb(255, 255, 255); } } } </style>
效果：
关于垂直方向：
关于垂直方向的官方文档在这：#Vertical，但是目前给的vue的demo代码竟然还是6.x的，真的是(╯°Д°)╯︵┻━┻。好了，想要把轮播图设置为垂直方向，要在swiper标签里加上:direction="'vertical'"，这里注意了，vertical一定要有两对引号包裹的，不管单引号在里还是外，否则不生效，加了这个参数后你会发现滚动轮播图时会散架，所以还要给swiper设置实高，非要用百分比的话就在swiper标签外套一个div，在div里给个实际高度就好，具体看下面代码：
<template> <swiper :direction="'vertical'" :modules="modules" :pagination="{ clickable: true }" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script> // import Swiper core and required modules import { Pagination } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/pagination/pagination.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { return { modules: [Pagination] }; }, }; </script> <style scoped> .swiper { height: 100vh; } .swiper-slide { height: 100%; line-height: 100vh; font-size: 30px; text-align: center; background-color: skyblue; } </style>
效果：
关于自动播放：
自动播放引入一下Autoplay 模块就好，没什么大问题。
<template> <swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" :autoplay="{delay: 2500,disableOnInteraction: false}"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script> // import Swiper core and required modules import { Pagination, Autoplay } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/pagination/pagination.min.css"; import "swiper/modules/autoplay/autoplay.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { return { modules: [Pagination, Autoplay], }; }, }; </script> <style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: violet; } </style>
效果：
关于无限循环：
需要开启无限循环的话在swiper标签上加入:loop="true"参数就可以了，但是你会发现swiper为了衔接多生成的两个swiper-slide并没有引用上我们自己设置的样式：
所以我们用deep处理一下就好:
<template> <swiper :modules="modules" navigation :loop="true"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> </template> <script> // import Swiper core and required modules import { Navigation } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/navigation/navigation.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { return { modules: [Navigation] }; }, }; </script> <style scoped> .swiper::v-deep .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: lightgreen; } </style>
关于获取swiper实例：
获取swiper实例的官方地址：传送门，官方描述是可以直接useSwiper来使用swiper实例，但是我翻了一遍源码也没有看到哪里有抛出useSwiper挂钩，我感觉被耍了(╯°Д°)╯︵┻━┻，不过还好swiper组件初始化绑定的onSwiper里可以拿到swiper实例，所以我用继承的方式把swiper实例抛了出去，感觉还行，嗯，先将就着用吧。效果看下图，试了下slidePrev和slideNext都可以用：
具体代码：
<template> <swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" @swiper="onSwiper"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> <view class="btn-view"> <button @click="slidePrev">slidePrev</button> <button @click="slideNext">slideNext</button> </view> </template> <script> // import Swiper core and required modules import { Pagination } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/pagination/pagination.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { const useSwiper = () => { }; const onSwiper = (swiper) => { // console.log(swiper); useSwiper.prototype.swiper = swiper }; return { useSwiper: new useSwiper(), onSwiper, modules: [Pagination], }; }, methods: { slidePrev() { console.log(this.useSwiper) this.useSwiper.swiper.slidePrev() }, slideNext() { console.log(this.useSwiper) this.useSwiper.swiper.slideNext() } } }; </script> <style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: beige; } .btn-view { display: flex; justify-content: center; } .btn-view button { margin: 20px; } </style>
获取swiper实例后跳转到指定索引：
具体代码：
<template> <swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" @swiper="onSwiper"> <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> </swiper> <view class="btn-view"> <button @click="slidePrev">slidePrev</button> <button @click="slideNext">slideNext</button> <button @click="toPage(1)">跳转到索引</button> </view> </template> <script> // import Swiper core and required modules import { Pagination } from "swiper"; // Import Swiper Vue.js components import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js"; // Import Swiper styles import "swiper/swiper.min.css"; import "swiper/modules/pagination/pagination.min.css"; // Import Swiper styles export default { components: { Swiper, SwiperSlide, }, setup() { const useSwiper = () => { }; const onSwiper = (swiper) => { // console.log(swiper); useSwiper.prototype.swiper = swiper }; return { useSwiper: new useSwiper(), onSwiper, modules: [Pagination], }; }, methods: { slidePrev() { console.log(this.useSwiper) this.useSwiper.swiper.slidePrev() }, slideNext() { console.log(this.useSwiper) this.useSwiper.swiper.slideNext() }, toPage(index) { // 如果index为1，则跳转到第三个slide index++ this.useSwiper.swiper.slideTo(index,500) } } }; </script> <style scoped> .swiper-slide { height: 300px; line-height: 300px; font-size: 30px; text-align: center; background-color: beige; } .btn-view { display: flex; justify-content: center; } .btn-view button { margin: 20px; } </style>
转载自大佬https://blog.csdn.net/weixin_42063951/article/details/121354984
