vue3中使用swiper（9）完整版-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3中使用swiper（9）完整版。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue3中使用swiper（9）完整版

1、使用方式

1）安装 `swiper`插件；

方法一：npm install swiper

方法二：yarn add swiper

注意：如果npm 无法安装swiper时，使用yarn安装；

npm install -g yarn // 安装yarn
yarn init # yarn  // 初始化
yarn remove 包名称  // 删除某个包
yarn run serve  // 运行

vue3中使用swiper（9）完整版

2）参数介绍

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

2、代码如下

1）组件swiperCom.vue的代码：

<template>
  <swiper
    class="swiper"
    :modules="modules"
    :loop="true"
    :slides-per-view="1"
    :space-between="50"
    :navigation="navigation"
    :autoplay="{ delay: 3000, disableOnInteraction: false }"
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide
      v-for="(item, index) in imgs"
      :key="index"
      class="swiper-slide"
    >
      <img :src="item.pic" alt="" class="swiper-img" />
    </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>
</template>
<script>
// Import Swiper Vue.js components
import { ref } from 'vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from 'swiper'
import 'swiper/scss'
import 'swiper/scss/navigation'
import 'swiper/scss/pagination'
// import 'swiper/css/scrollbar'

export default {
  name: 'SwiperCom',
  data () {
    return {
      imgs: [
        { pic: require('../assets/001.jpg') },
        { pic: require('../assets/002.jpg') },
        { pic: require('../assets/003.jpg') },
        { pic: require('../assets/004.png') }
      ]
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  setup () {
    const onSwiper = (swiper) => {
      console.log(swiper)
    }
    const navigation = ref({
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    })
    const prevEl = (item, index) => {
      // console.log('上一张' + index + item)
    }
    const nextEl = () => {
      // console.log('下一张')
    }
    // 更改当前活动swiper
    const onSlideChange = (swiper) => {
      // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
      console.log(swiper.activeIndex)
    }
    return {
      onSwiper,
      onSlideChange,
      prevEl,
      nextEl,
      navigation,
      modules: [Autoplay, Navigation, Pagination, Scrollbar, A11y]
    }
  }
}
</script>
<style lang="scss" > 
.swiper {
  width: 339rem;
  height: 150rem;
  background-color: antiquewhite;
  .swiper-slide {
    .swiper-img {
      width: 339px;
      height: 150px;
    }
  }
  .swiper-button-next,
  .swiper-button-prev {
    --swiper-theme-color: red;
    --swiper-navigation-size: 20rem;
  }
//   改变小圆点的样式
  .swiper-pagination-bullet-active {
    background: white;
  }
}
</style>

vue3中使用swiper（9）完整版

2）组件HomeView.vue的代码：

<template>
  <div class="home">
    <swiperCom />  // 在HomeView中调用组件swiperCom
  </div>
</template>

<script>
// @ is an alias to /src
import swiperCom from '@/components/swiperCom.vue' // 引入组件swiperCom
export default {
  name: 'HomeView',
  components: {
    swiperCom   // 所用到的组件记得写在components中
  }
}
</script>