如何在Vue3中使用Swiper?
2910
介绍
在 vue3
中使用 swiper
, 实现轮播图的效果;如果组件样式等模块引入不当,很有可能导致,页面无效果;或者想要的箭头或者切换效果异常问题。具体使用方式如下所示:
使用方式
使用命令 npm install swiper
安装 swiper
插件;
在main.js
里使用样式文件,如下所示:
import App from './App.vue' import router from './router' import VueAwesomeSwiper from 'vue-awesome-swiper'; import 'swiper/css'; createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')
在使用的页面,引入需要使用到的组件,比如常用的左右切换箭头,小圆点指示器等;如下所示:
import { Swiper, SwiperSlide } from 'swiper/vue' // 引入swiper样式(按需导入) import 'swiper/css/pagination' // 轮播图底面的小圆点 import 'swiper/css/navigation' // 轮播图两边的左右箭头 // import 'swiper/css/scrollbar' // 轮播图的滚动条, 轮播图里一般不怎么会使用到滚动条,如果有用到的话import导入就行 // 引入swiper核心和所需模块 import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper' const navigation = ref({ nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }); // 在modules加入要使用的模块 const modules = [Autoplay, Pagination, Navigation, Scrollbar] const prevEl = (item, index) => { // console.log('上一张' + index + item) }; const nextEl = () => { // console.log('下一张') }; // 更改当前活动swiper const onSlideChange = (swiper) => { // swiper是当前轮播的对象,里面可以获取到当前swiper的所有信息,当前索引是activeIndex console.log(swiper.activeIndex) }
在页面中使用组件和相关的模块
<swiper :modules="modules" :loop="true" :slides-per-view="1" :space-between="50" :autoplay="{ delay: 4000, disableOnInteraction: false }" :navigation="navigation" :pagination="{ clickable: true }" :scrollbar="{ draggable: false }" class="swiperBox" @slideChange="onSlideChange" > <swiper-slide>Slide 1</swiper-slide> <swiper-slide>Slide 2</swiper-slide> <swiper-slide>Slide 3</swiper-slide> <div class="swiper-button-prev" @click.stop="prevEl(item, index)" /> <!--左箭头。如果放置在swiper外面,需要自定义样式。--> <div class="swiper-button-next" @click.stop="nextEl" /> <!--右箭头。如果放置在swiper外面,需要自定义样式。--> <!-- 如果需要滚动条 --> <!-- <div class="swiper-scrollbar"></div> --> </swiper>
参数介绍:
modules
:
loop
: 是否循环播放
slides-per-view
:控制一次显示几张轮播图
space-between
: 每张轮播图之间的距离,该属性不可以和margin
属性同时使用;
autoplay
: 是否自动轮播,delay
为间隔的毫秒数;disableOnInteraction
属性默认是true
,也就是当用户手动滑动后禁用自动播放
, 设置为false
后,将不会禁用,会每次手动触发后再重新启动自动播放。
navigation
: 定义左右切换箭头
pagination
: 控制是否可以点击圆点指示器切换轮播
scrollbar
: 是否显示轮播图的滚动条,draggable
设置为true
就可以拖动底部的滚动条(轮播当中,一般不怎么会使用到这个属性)
本文网址:https://www.zztuku.com/index.php/detail-14173.html
站长图库 - 如何在Vue3中使用Swiper?
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!