在nuxt3中使用swiper幻灯片插件
虽然经常使用swiper但是在不同环境下,使用方式还是有很大不同,这里记录下在nuxt3中使用swiper的两种方式。
以组件的方式使用
在vue中都大多使用组件,这里使用官方的nuxt-swiper,注意swiper版本很多,这里直接npm下载的没考虑版本
- 下载
# npm
npm install nuxt-swiper
# yarn
yarn add nuxt-swiper
#pnpm
pnpm add nuxt-swiper
- 配置
// nuxt.config.ts
import {
defineNuxtModule } from 'nuxt'
export default defineNuxtConfig({
modules: ['nuxt-swiper']
swiper: {
// Swiper options
//----------------------
// prefix: 'Swiper',
// styleLang: 'css',
// modules: ['navigation', 'pagination'], // all modules are imported by default
}
})
- 使用
swiper主要注意三个方面
属性
事件
方法
- 属性类似于v-bind的绑定
- 事件类似于v-on的绑定
- 方法需要获取当前swiper的实例
在@swiper事件执行后获取swiper实例并保存即可
值的注意的是nuxt中模块都是自动导入的无需自己导入
实例代码如下
<template>
<swiper
ref="mySwiperRef"
:modules="[SwiperNavigation, SwiperPagination, SwiperScrollbar]"
:slides-per-view="1"
:space-between="40"
navigation
:breakpoints="breakpoints"
:pagination="{ clickable: true }"
:scrollbar="{ draggable: true }"
loop
@swiper="onSwiper" @slideChange="onSlideChange">
<swiper-slide> <div class="item"> Slide 1 </div> </swiper-slide>
<swiper-slide> <div class="item"> Slide 2 </div> </swiper-slide>
<swiper-slide> <div class="item"> Slide 3 </div> </swiper-slide>
<swiper-slide> <div class="item"> Slide 4 </div> </swiper-slide>
<swiper-slide> <div class="item"> Slide 5 </div> </swiper-slide>
<swiper-slide> <div class="item"> Slide 6 </div> </swiper-slide>
<swiper-slide> <div class="item"> Slide 7 </div> </swiper-slide>
<swiper-slide> <div class="item"> Slide 8 </div> </swiper-slide>
<swiper-slide> <div class="item"> Slide 9 </div> </swiper-slide>
</swiper>
<div class="btns">
<el-button type="primary" icon="ArrowLeftBold" circle @click="toPrev"/>
<el-button type="primary" icon="ArrowRightBold" circle @click="toNext"/>
</div>
</template>
<script setup>
import {
ref,onMounted,inject } from 'vue';
import {
Controller } from 'swiper';
import {
Swiper, SwiperSlide,useSwiper } from 'swiper/vue';
let mySwiper = null;
/** 断点 */
let breakpoints = ref(null);
breakpoints.value = {
320: {
//当屏幕宽度大于等于320
slidesPerView: 2,
spaceBetween: 10
},
768: {
//当屏幕宽度大于等于768
slidesPerView: 3,
spaceBetween: 20
},
1280: {
//当屏幕宽度大于等于1280
slidesPerView: 4,
spaceBetween: 30
}
}
/** 自定义按钮 */
function toPrev(){
mySwiper.slidePrev();
}
function toNext(){
mySwiper.slideNext();
}
/** swiper加载完毕 */
const onSwiper = (swiper) => {
mySwiper = swiper;
};
/** swiper切换 */
const onSlideChange = () => {
console.log('slide change');
};
</script>
<style scoped lang="scss">
.item{
height:300px;
text-align:center;
line-height:300px;
background:#ccc
}
.active-item{
color:tomato
}
.btns{
margin-top:20px
}
</style>
使用姿势
nuxt-swiper的文档很
简洁
这里给出我的使用方式,想要实现更多效果需要看其他文档
- https://nuxt.com.cn/modules/swiper 【nuxt-swiper的文档和2有些许区别(主要是引入方式不同)- - 过一眼】
- https://swiperjs.com/vue 【swiper-vue的文档其中描述了swiper组件的prop、插槽等,这里
比较重要
因为基本语法就是按照这里来的 - -了解大概就行】 - https://swiper.com.cn/api/index.html 【swiper中文网,这里的文档是我觉得最好看懂且有实例更形象⭐,这里可以细看;缺点在于语法是原生JavaScript语法,所以需要将3和2对照着用】
- https://swiper.com.cn/demo/index.html 【基础案例】
- https://swiper.com.cn/demo/web/index.html 【好康的幻灯片案例】
swiper毕竟是旧时代的残党
在vue中使用肯定没有element、vant那样自然,也许旧的方式比组件适合
以原生的方式使用
正如上文所说,以组件的方式使用swiper文档不给力,不好用。原生的文档更好更直观,下面介绍nuxt中使用原生swiper的方式 版本8.3.0。
-
下载
https://swiper.com.cn/demo/145-css-mode.html 访问这个页面,按ctrl+u找到css文件链接和js文件链接,把这两个文件下载下来 -
引入
在plugin/global.js中引入
// plugin/global.js
/* swiper */
import './swiper/swiper-bundle.min.css';
import './swiper/swiper-bundle.min';
export default defineNuxtPlugin(async (NuxtApp) => {
})
- 使用
<template>
<div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</template>
<script setup>
import {
ref,
onMounted
} from "vue";
onMounted(() => {
// 个人还是这语法看着舒服
var swiper = new Swiper(".mySwiper", {
cssMode: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
},
mousewheel: true,
keyboard: true,
});
})
</script>
<style lang="scss">
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 300px
}
</style>