Swiper组件简单封装

swiper安装

安装的版本是6版本

npm install swiper@6.8.4 --save

FilmSwiper组件

组件js、cs导入
有个插槽，是为了放filmswiperitem组件的

<template>
    <div class="swiper-container kerwin">
        <div class="swiper-wrapper">
          <slot></slot>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <!-- <div class="swiper-button-prev"></div> -->
        <!-- <div class="swiper-button-next"></div> -->
        <!-- 如果需要滚动条-->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
</template>

<script>
import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'
export default {
  props: {
    loop: {
      type: Boolean,
      default: true
    }
  },
  mounted () {
    console.log(this.loop)
    // 初始化swiper
    new Swiper('.kerwin', {
      // direction: 'vertical', // 垂直切换选项
      loop: this.loop, // 循环模式选项
      // 自动切换
      autoplay: {
        delay: 2500,
        disableOnInteraction: false
      },

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      }
      // 如果需要前进后退按钮
      // navigation: {
      //   nextEl: '.swiper-button-next',
      //   prevEl: '.swiper-button-prev'
      // }
      // 如果需要滚动条
      // scrollbar: {
      //   el: '.swiper-scrollbar'
      // }
    })
  }
}
</script>

<style scoped>
    .swiper-container {
        width: 600px;
        height: 200px;
    }

    img-class {
        width: 600px;
        height: 200px;
    }
</style>

FileSwiperItem组件

有插槽

<template>
  <div class="swiper-slide">
    <slot></slot>
  </div>
</template>

使用

先import组件
在注册组件
模拟数据
遍历数据

<template>
    <div>
        <div style="height:200px;background:yellow">
            <filmSwiper :key="dataList.length" :loop="true">
                <file-swiper-item v-for="data in dataList" :key="data.id">
                    <img :src="data.imgUrl" class="img-class" />
                </file-swiper-item>
            </filmSwiper>
        </div>
    </div>
</template>
<script>
import filmSwiper from '@/components/films/FilmSwiper'
import fileSwiperItem from '@/components/films/FileSwiperItem'
export default {
  data () {
    return {
      dataList: []
    }
  },
  mounted () {
    setTimeout(() => {
    	this.dataList = [
         'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F86d6277f9e2f070859318101e024b899a901f2ff.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=aec5cfa4ab00f14ebc352c6c0cf74968',
         'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F06%2F20200706150844_KcVlG.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=91b49462bd22370160fd89c05306e566',
         'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F94o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F7a899e510fb30f24029b4702c195d143ad4b03a9.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1649647326&t=f03f024afb1ef595e5aa69217c4b5efc'
       ]
     }, 2000)
  },
  components: {
    filmSwiper,
    fileSwiperItem
  }
}
</script>
<style scoped>
    #three{
        height: 270px;
        border: 5px solid;
    }
    .img-class {
        width: 600px;
        height: 300px;
    }
</style>>