vue3 swiper6.8快速使用

Posted 2022-01-18 嘴巴嘟嘟

"swiper": "^6.8.2",

然后直接界面使用

<template>
  <div class="main">
    <swiper
      class="swiper-warp"
      :autoplay='
        "delay": 2500,
        "disableOnInteraction": false
      '
      :pagination=' "clickable": true '
      :scrollbar="draggable: true"
    >
     <!-- :direction= "vertical" -->
      <swiper-slide class="swiper-container"> 1</swiper-slide>
      <swiper-slide class="swiper-container"> 1</swiper-slide>
    </swiper>
  </div>
</template>

<script>

import 'swiper/swiper.scss'
import  Swiper, SwiperSlide  from 'swiper/vue'
import SwiperCore,  Autoplay, Pagination  from 'swiper'
import 'swiper/components/pagination/pagination.scss'
import  ref, onMounted, reactive, toRefs  from 'vue'
SwiperCore.use([Autoplay, Pagination])
export default 
  components: 
    Swiper,
    SwiperSlide
  ,
  setup () 
    return 
      showTab,
      tabValue
    
  

</script>

深入了解 https://swiperjs.com/vue