vue3中使用swiper完整版教程(vue3中使用gis地图)

编辑：rootadmin

vue3中使用swiper完整版教程介绍

推荐整理分享vue3中使用swiper完整版教程(vue3中使用gis地图)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3中使用jsx,vue3中使用sass,vue3中使用jsx,vue3中使用gis地图,vue3中使用gis地图,vue3中使用swiper控制器,vue3中使用swiper控制器,vue3中使用jsx,内容如对您有帮助，希望把文章链接给更多的朋友！

在 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('下一张')};// 更改当前活动swiperconst 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)" />  <div class="swiper-button-next" @click.stop="nextEl" />   </swiper>

参数介绍： modules： loop：是否循环播放 slides-per-view：控制一次显示几张轮播图 space-between：每张轮播图之间的距离，该属性不可以和margin 属性同时使用； autoplay：是否自动轮播， delay为间隔的毫秒数；disableOnInteraction属性默认是true，也就是当用户手动滑动后禁用自动播放，设置为false后，将不会禁用，会每次手动触发后再重新启动自动播放。 navigation：定义左右切换箭头 pagination：控制是否可以点击圆点指示器切换轮播 scrollbar：是否显示轮播图的滚动条， draggable设置为 true就可以拖动底部的滚动条（轮播当中，一般不怎么会使用到这个属性）

本文链接地址:https://www.jiuchutong.com/zhishi/299108.html 转载请保留说明！

上一篇：【vue2】近期bug收集与整理02(vue-bus)

下一篇：【图像生成Metrics】快速计算FID、KID、IS、PPL(图像自动生成)