在Vue 3中应用Swiper 7滑动轮播图组件
文章目录
- 项目场景:
- 普通vue3项目:
- vue3+typeScript项目:
- 组件样式修改:
- 关于垂直方向:
- 关于自动播放:
- 关于无限循环:
- 关于获取swiper实例:
项目场景:
前不久刚在我的vue3项目中用了swiper6,坑真的是比农村的泥路还要多,这不官方直接来了个swiper7,接下来手把手教下大家怎么用,让大家少走弯路。
另外swiper7的话不会出现打包后放服务器样式丢失的情况了=》swiper6打包后样式丢失
普通vue3项目:
win10的小伙伴我们可以先在桌面(或者文件夹里)按住Shift之后点击右键打开Powershell窗,不是的自己打开cmd,效果是一样的。
之后在命令行里面输入vue create vue3
接着选择创建默认的vue3项目
接着用VSCode编辑器打开项目,在命令输入npm i swiper
(swiper8出了可以指定一下版本npm i swiper@7
),成功后package.json文件中会标上
接着我在官网找了个功能比较全的代码作为例子,如下:
<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
接着我们打开modules
目录,把用到的组件路径都改一下,然后久违的绿它色终于出现了
如果嫌麻烦可以直接用总样式,在swiper目录下的swiper-bundle.css
或者压缩版swiper-bundle.min.css
,
然后你在浏览器看到的样子是这样的,麻的什么鬼,官方真的是(╯°Д°)╯︵┻━┻
这是因为官方例子里默认一次显示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>
vue3+typeScript项目:
我们先在桌面打开命令行,输入vue create vue3-ts
我们选择自定义项目
接着选这三项就好了,其他可以先不用
选择3.x
之后的配置看着选,问题不大
同样的,先在命令输入npm i swiper
(swiper8出了可以指定一下版本npm i swiper@7
)把swiper7装上
因为ts的书写方式不一样,不可以直接用官方的例子,所以就不一一粘贴显示了,直接上改好了的,把下面的代码全部替换到App.vue
文件就可以了,显示的效果是和普通项目一样的我就不展示了。
<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 lang="ts">
// 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 { defineComponent } from "vue";
export default defineComponent({
name: "",
components: {
Swiper,
SwiperSlide,
},
setup() {
const onSwiper = (swiper: any) => {
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实例,并且Composition API 是直接在setup中定义方法,所以间接赋一下值就好,具体效果:
具体代码:
<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
上一篇: 2024年美国数学建模大赛C题解构:策略、模型示例、编程实现与论文详解
下一篇: 美女图片2