[JavaScript知识库]Vue中使用swiper构建简易轮播图

<!--swiper插件配置-->
<template>
  <div class="view-pager">
    <swiper
      :modules="modules"
      <!--循环播放-->
      :loop="true"		
     <!--底部圆圈-->
      :pagination = "{		
        clickable: true,
      }"
      <!--滚动栏-->
      :Scrollbar = "{		
        draggable: true,
        el: '.swiper-scrollbar',
        hide: false,
      }"
      :autoplay ="{ 
	      delay: 3000, 
	      disableOnInteraction: false 
      }"
      :space-between="20"
      :navigation="{	<!--按钮-->
        nextEl: 'swiper-button-next',
        prevEl: 'swiper-button-prev',
        disabledClass: 'my-button-disabled'
      }"
      @swiper = "onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide v-for="item in cbanners" :key="item">
        <a :href="item.link">
          <img :src="item.image" alt="" style="width: 100%;">
        </a>
      </swiper-slide>
    </swiper>
  </div>
</template>

创建 swiper 轮播区域，其他选项访问swiper官方网站

<script>
	// 这里就是更新后的路径，以前是import { Swiper, SwiperSlide } from 'swiper/vue'
	import { Swiper, SwiperSlide } from 'swiper/vue'
	import { Pagination, A11y, Autoplay, Scrollbar, Navigation } from 'swiper'
	
	// 更新后的路径，以前是import 'swiper/css，这里使用别名，可查看路径node_modules/swiper/package.json'
	import 'swiper/css'
	import 'swiper/css/pagination'
	import 'swiper/css/navigation'
	import 'swiper/css/scrollbar'
	
	export default {
	  name: 'ViewPager',
	  components: {
	    Swiper,
	    SwiperSlide
	  },
	  props: ['cbanners'],	//轮播图数据
	  setup () {
	    const onSwiper = (swiper) => {
	      console.log(swiper)
	    }
	    const onSlideChange = () => {
	      console.log('slide change')
	    }
	    return {
	        // swiper组件
	      modules: [Pagination, A11y, Autoplay, Scrollbar, Navigation],
	      onSwiper,
	      onSlideChange
	    }
	  }
	}
</script>

Swiper使用的插件需要先在script 标签内的 moudles 里面注册，然后在标签里面才能正常使用
更多参数访问 swiper 官方网站