vue3中使用swiper（9）完整版

1、使用方式

1）安裝 swiper插件；

方法一：npm install swiper

方法二：yarn add swiper

注意：如果npm 無(wú)法安裝swiper時(shí)，使用yarn安裝；

npm install -g yarn // 安裝yarn
yarn init # yarn  // 初始化
yarn remove 包名稱  // 刪除某個(gè)包
yarn run serve  // 運(yùn)行

2）參數(shù)介紹

• modules：

• loop： 是否循環(huán)播放

• slides-per-view：控制一次顯示幾張輪播圖

• space-between： 每張輪播圖之間的距離，該屬性不可以和margin 屬性同時(shí)使用；

• autoplay： 是否自動(dòng)輪播， delay為間隔的毫秒數(shù)；disableOnInteraction屬性默認(rèn)是true，也就是當(dāng)用戶手動(dòng)滑動(dòng)后禁用自動(dòng)播放， 設(shè)置為false后，將不會(huì)禁用，會(huì)每次手動(dòng)觸發(fā)后再重新啟動(dòng)自動(dòng)播放。

• navigation： 定義左右切換箭頭

• pagination： 控制是否可以點(diǎn)擊圓點(diǎn)指示器切換輪播

• scrollbar： 是否顯示輪播圖的滾動(dòng)條， draggable設(shè)置為 true就可以拖動(dòng)底部的滾動(dòng)條（輪播當(dāng)中，一般不怎么會(huì)使用到這個(gè)屬性）

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外面，需要自定義樣式。-->
    <!-- 如果需要滾動(dòng)條 -->
    <!-- <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('下一張')
    }
    // 更改當(dāng)前活動(dòng)swiper
    const onSlideChange = (swiper) => {
      // swiper是當(dāng)前輪播的對(duì)象，里面可以獲取到當(dāng)前swiper的所有信息，當(dāng)前索引是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;
  }
//   改變小圓點(diǎn)的樣式
  .swiper-pagination-bullet-active {
    background: white;
  }
}
</style>

2）組件HomeView.vue的代碼：

<template>
  <div class="home">
    <swiperCom />  // 在HomeView中調(diào)用組件swiperCom
  </div>
</template>

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

3、基本步驟

1）在 components 文件中新建組件 swiperCom.vue ，在HomeView.vue中調(diào)用組件

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-492328.html

到了這里，關(guān)于vue3中使用swiper（9）完整版的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！