一、swiper

官网

项目开发中必不可少的会用到轮播效果，简单的走马灯效果，一般使用的 UI 组件都会自带。 如果比较复杂的还是需要使用专业的插件来实现 比如最常使用的 swiper 但是吧，这版本是真的乱！

1. 各版本使用情况 [主要基于vue]

• vue2

  • 在 vue2 中使用 swiper 需要搭配另一个插件使用 vue-awesome-swiper，顾名思义，如果你想在 vue2 里面用这玩意少掉几根头发，那你最好安装这个插件。
  • 同时看到 github 上 vue-awesome-swiper 项目还有一段这个描述 大概的意思是：这玩意快过时了，请迁移最新版本，但是最新版本是 ts 写的，目前支持 vue3，看完就想问候他亲戚！！
  • 安装脚本

      yarn add swiper vue-awesome-swiper -S

  • 注册
    • 全局

      import Vue from 'vue'
      import VueAwesomeSwiper from 'vue-awesome-swiper'
      
      // import style
      import 'swiper/css/swiper.css'
      
      Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

    • 局部

      import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
      import 'swiper/css/swiper.css'
      
      export default {
        components: {
          Swiper,
          SwiperSlide
        },
        directives: {
          swiper: directive
        }
      }

  • 用法 github
    配置选项

• vue3

  • 只需要安装 swiper
  • 脚本

      npm i swiper -S

  • 具体参考

2. 项目组件封装思路

• 利用 vue 的 slot，进行封装处理

    <template>
      <div class="swiper-container">
        <swiper :options="swiperOptions" ref="swiper">
          <swiper-slide v-for="slot of slideSlot" :key="slot">
            <slot :name="slot"/>
          </swiper-slide>
        </swiper>
      </div>
    </template>
    
    <script>
    import { mergeObject } from "@/utils/MergeObject";
    export default {
      name: "BSwiper",
      props: {
        slideSlot: {
          type: Array,
          default: ()=> [],
        },
        specialOptions: {
          type: Object,
          default: () => {},
        },
      },
      data() {
        return {
          swiperOptions: {
            autoplay: true,
            //设置环路
            loop: true,
            // slidesPerView: 1,
            // slidesPerGroup: 3,
            direction: 'vertical',
            swiper: null,
          },
        };
      },
      mounted() {
        // 合并配置
        this.swiperOptions = mergeObject(this.swiperOptions, this.specialOptions);
        this.swiper = this.$refs.swiper.$swiper;
        this.swiper.el.onmouseover = this.onmouseover;
        this.swiper.el.onmouseout = this.onmouseout;
      },
      methods: {
        onmouseover() {
          this.swiper.autoplay.stop();
        },
        onmouseout() {
          this.swiper.autoplay.start();
        },
      },
    };
    </script>
    
    <style scoped lang="less">
        .swiper-container {
          width: 300px;
          height: 130px;
          overflow: hidden;
        }
    </style>

3. 问题暂未解决

• 当调成 swiper 为竖向滚动的时候，如果在滚动期间，切换屏幕大小，会导致，滚动卡住
• 走马灯效果直接替换成 各个UI的走马灯组件【建议】