vue3 使用swiper

最新推荐文章于 2024-05-21 09:48:42 发布

阿__杰

最新推荐文章于 2024-05-21 09:48:42 发布

阅读量1.7k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_34530690/article/details/132439802

版权

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

1.安装 swiper插件

npm install swiper //目前版本10.2.0

2.组件方式使用

<template>
  <swiper
    modules
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
   <swiper-slide v-for="(item, index) in imgList" :key="index">
       <el-image :src="item.url" fit="contain"></el-image>
   </swiper-slide>    
  </swiper>
</template>
<script>
  // 这里需要什么其他功能可以查询文档
  import { Navigation, Pagination, A11y } from 'swiper/modules'
  import { Swiper, SwiperSlide } from 'swiper/vue'

  // 导入插件样式
  import 'swiper/css'
  import 'swiper/css/navigation' // 左右按钮
  import 'swiper/css/pagination' // 分页小圆点

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, A11y],
      };
    },
  };
</script>

3.最终效果