vue3中使用swiper7
项目场景：前不久刚在我的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 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: ,
};
},
};
</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: ,
};
},
};
</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: ,
};
},
});
</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:
};
},
};
</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:
};
},
};
</script>
<style scoped>
.swiper::v-deep .swiper-slide {
height: 300px;
line-height: 300px;
font-size: 30px;
text-align: center;
background-color: lightgreen;
}
</style>
页:
[1]