当前位置: 首页 > Web前端 > JavaScript

在vue3中使用swiper8

时间:2023-03-26 20:11:00 JavaScript

最新swiper使用记录swiper中文APIswiper英文版API建议看这个API"vue":"^3.2.37""swiper":"8.3.2"安装npmiswiperimportswiperimport{Swiper,SwiperSlide}from"swiper/vue";//这是分页器和对应的方法。Swiper似乎在6.将寻呼机和其他一些工具分开了。importSwiperCore,{Autoplay,Navigation,Pagination,A11y}from"swiper";SwiperCore.use([Navigation,Pagination,Scrollbar,A11y,Autoplay]);//导入swiper样式,对应css如果使用less或者css,只需要将scss改成对应的import"swiper/css";import"swiper/css/navigation";import"swiper/css/pagination";constmodules=[自动播放、分页、导航、A11y];特别是,SwiperCore需要使用它来使用暴露的属性SwiperCore.use([Navigation,Pagination,Scrollbar,A11y,Autoplay])在模板中使用部分参数说明::slidesPerView="1"//每页多少个:spaceBetween="30"//每个间距多少:loop="true"//循环滚动:centeredSlides="true"//值为[false]时左对齐,默认为左对齐,值为[true]时居中对齐:pagination="{clickable:true,}"//点击分页是否切换圆点:autoplay="{delay:1000,disableOnInteraction:false,}"//设置多少毫秒执行一次动画(可以理解为:翻页/切换):navigation="true"//从左到右切换箭头通过使用以下导入定义箭头(注意)并使用import{useSwiper}from'swiper/vue';constswiper=useSwiper();next结果是TheslideNextmethodwasnotfound。大致看了下源码,好像这个方法没有暴露,也可能是用错了。知道评论留言就不会折腾了。另一种方式(通过ref),可以得到对应的属性constmySwiper=ref(null)//获取滑动器属性mySwiper.value?.$el.swipermySwiper.value?.$el.swiper.slideNext()