相关推荐recommended
vue3中使用swiper完整版教程
作者:mmseoamin日期:2023-11-30

介绍

在 vue3 中使用 swiper, 实现轮播图的效果;如果组件样式等模块引入不当,很有可能导致,页面无效果;或者想要的箭头或者切换效果异常问题。具体使用方式如下所示:

vue3中使用swiper完整版教程,vue3中使用swiper完整版教程,第1张

使用方式

  1. 使用命令 npm install swiper 安装 swiper插件;
  2. 在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')
  1. 在使用的页面,引入需要使用到的组件,比如常用的左右切换箭头,小圆点指示器等;如下所示:
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)
}
  1. 在页面中使用组件和相关的模块

    Slide 1
    Slide 2
    Slide 3
    

参数介绍:

modules:

loop: 是否循环播放

vue3中使用swiper完整版教程,vue3中使用swiper完整版教程,第2张

slides-per-view:控制一次显示几张轮播图

space-between: 每张轮播图之间的距离,该属性不可以和margin 属性同时使用;

autoplay: 是否自动轮播, delay为间隔的毫秒数;disableOnInteraction属性默认是true,也就是当用户手动滑动后禁用自动播放, 设置为false后,将不会禁用,会每次手动触发后再重新启动自动播放。

vue3中使用swiper完整版教程,vue3中使用swiper完整版教程,第3张

navigation: 定义左右切换箭头

pagination: 控制是否可以点击圆点指示器切换轮播

scrollbar: 是否显示轮播图的滚动条, draggable设置为 true就可以拖动底部的滚动条(轮播当中,一般不怎么会使用到这个属性)