项目场景：

前不久刚在我的vue3项目中用了swiper6，坑真的是比农村的泥路还要多，这不官方直接来了个swiper7，接下来手把手教下大家怎么用，让大家少走弯路。

另外swiper7的话不会出现打包后放服务器样式丢失的情况了=》swiper6打包后样式丢失

普通vue3项目：

win10的小伙伴我们可以先在桌面（或者文件夹里）按住Shift之后点击右键打开Powershell窗，不是的自己打开cmd，效果是一样的。

之后在命令行里面输入vue create vue3

接着选择创建默认的vue3项目

接着用VSCode编辑器打开项目，在命令输入npm i swiper，成功后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 modulesimport { Navigation, Pagination, Scrollbar, A11y } from 'swiper';// Import Swiper Vue.js componentsimport { Swiper, SwiperSlide } from 'swiper/vue';// Import Swiper stylesimport 'swiper/css';import 'swiper/css/navigation';import 'swiper/css/pagination';import 'swiper/css/scrollbar';// Import Swiper stylesexport 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把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>

效果：

关于无限循环：

需要开启无限循环的话在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>

over~~

vue3中使用swiper7相关推荐

vue3中使用swiper7轮播图插件
文章目录项目场景: 普通vue3项目: vue3+typeScript项目: 组件样式修改: 关于垂直方向: 关于自动播放: 关于无限循环: 关于获取swiper实例: 项目场景: 前不久刚在我的v ...
web前端培训分享：使用Dplayer实现Vue3中的视频及弹幕播放
Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML.Vue.React中实现视频播放的功能需求.Dplayer同时也提供了目前各大视频站都在使用的弹幕功能 ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
vue3中v-model的重大更新
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 Vue.component('custom-input', {props: ['value'],te ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
Vue3中的父子、子父组件通信
Vue3中的父子.子父组件通信方式总结李俊才的CSDN博客 CSDN用户名:jcLee95 邮箱:291148484@163.com 1. 父组件 => 子组件 | 使用props 父组件(分 ...
vue3中 v-md-editor 编辑器的基本使用分享
vue3中 v-md-editor 编辑器的基本使用分享安装 (2.3.15以上) # npm npm install @kangc/v-md-editor -S # yarn yarn add @ ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...

vue3中使用swiper7