全栈笔记

React or Vue2 or Vue3 or TS 使用最新

2022-03-17  本文已影响0人  seaflyj

同时支持vue2 vue3 React，支持默认安装的 swiper8 版本，支持 TS ，无论是不是TS项目都可使用，亲测有效，支持异步获取数据

由于公司重构项目需要，好多关于轮播的东西都是使用swiper实现的，所以在重构中引入swiper进入了好多坑，希望这篇文档能能给予同学们帮助

最终实现的效果：


微信截图_20210326121325.png

一、使用的框架 vue3 + ts + vue-awesome-swiper （一次失败的尝试,可以不看这段）

使用vue-awesome-swiper

和大多同学一样，网上直接拿来了关于vue-awesome-swiper的文档便开始安装配置，结果发现在main.ts中类型报错，于是各种解决问题，声明类型定义文件等等，结果发现根本不起作用


11111111.png

所以认为是没有类型定义文件，于是在shims-vue.d.ts中定义了

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}
declare module 'vue-awesome-swiper'

结果却是：


2222222.png

我去查插件的文档，通过查看issues我会发现了此插件并不支持vue3.0，这不是太坑了吗，浪费了好多时间，所以引入插件还是要看看是不是支持相应框架在引入，切记；但是还是需要swiper，我不死心，发现swiper是支持vue3的，于是。。。

二、使用的框架 vue3 + ts + swiper8（可以仔细看了，能直接用）

安装：

cnpm install swiper --save

我们默认安装的swiper8.0，这个就有一些坑要处理,如下：
1、使用某些功能需要按需引入需要相应的包，如翻页，自动播放等
2、解决了一些同学发现的左右翻页标签，小圆点出不来等问题
3、还无法实现全局引用，都为局部引用

直接上全部代码；本代码为vue3 + ts + swiper8，仔细看代码可以发现，并不需要 swiper 对 ts 进行特殊处理，是因为 swiper6 同时支持了 ts 包含了相应的类型定义文件（xxx.d.ts），所以无论是不是 ts 架构，都可以正常使用

<template>
  <div class="home">
    <!-- swiper1 -->
    <div class="title">基本效果-小圆点和左右切换</div>
    <div class="swiper-container swiper1">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../assets/1.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../assets/2.png" alt="" />
        </div>
        <div class="swiper-slide">
          <img src="../assets/3.png" alt="" />
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>

      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    </div>
  </div>

  <!-- swiper2 -->
  <div class="title">切换效果-effect</div>
  <div class="swiper-container swiper2">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../assets/2.png" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="../assets/3.png" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="../assets/1.png" alt="" />
      </div>
    </div>
  </div>

  <!-- swiper3 -->
  <div class="title">切换效果-cube</div>
  <div class="swiper-container swiper3">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="../assets/3.png" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="../assets/1.png" alt="" />
      </div>
      <div class="swiper-slide">
        <img src="../assets/2.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script >
import { defineComponent, onMounted } from "vue";
import Swiper, {
  Autoplay,
  EffectCoverflow,
  EffectCube,
  Pagination,
  Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);

// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
import "swiper/css/bundle";

// swiper.less/sass/css 决定了基础的样式
import "swiper/css";

export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    onMounted(() => {
      new Swiper(".swiper1", {
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          hideOnClick: true,
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        on: {
          navigationShow: function () {
            console.log("按钮显示了");
          },
        },
      });

      new Swiper(".swiper2", {
        //循环
        loop: true,
        //每张播放时长3秒，自动播放
        spaceBetween: 25,
        effect: "coverflow",
        grabCursor: true,
        centeredSlides: true,
        slidesPerView: 1.32,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        coverflowEffect: {
          rotate: 0,
          stretch: 0,
          depth: 100,
          modifier: 1,
          slideShadows: true,
        },
      });

      new Swiper(".swiper3", {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        effect: "cube",
        cubeEffect: {
          slideShadows: true,
          shadow: true,
          shadowOffset: 100,
          shadowScale: 0.6,
        },
      });
    });
  },
});
</script>

<style scoped>
.title {
  text-align: center;
  line-height: 50px;
}

.swiper-slide img {
  width: 100%;
}
</style>

三、使用的框架 vue2 + ts + swiper6 （同样兼容 ts 项目，无需特殊处理）

<template>
  <div class="home">
    <!-- swiper1 -->
    <div class="title">基本效果-小圆点和左右切换</div>
        <div class="swiper-container swiper1">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../assets/sw1.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="../assets/sw2.jpg" alt="" />
            </div>
            <div class="swiper-slide">
              <img src="../assets/sw3.jpg" alt="" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <div class="swiper-button-prev"></div>
          <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
          <div class="swiper-button-next"></div>
          <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
        </div>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "vue";
import Swiper, {
  Autoplay,
  EffectCoverflow,
  EffectCube,
  Pagination,
  Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);

// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
import "swiper/css/bundle";

// swiper.less/sass/css 决定了基础的样式
import "swiper/css";

export default {
    name: '',
    data() {
        return {};
    },
    mounted() {
        // 如果为异步获取数据，需要给标签添加 v-if ，在数据获取到的回调中，如 ajax 的回调中 调用初始化 initSwiper 方法，且v-if 为 true；
        // vue3 获取异步数据同理；
        // 需要使用 this.$nextTick
        // 例：
        setTimeout(()=>{
            this.$nextTick(() => {
                 this.initSwiper();
            );
        })
    },
    methods: {
        initSwiper(){
            new Swiper('.swiper1', {
                pagination: {
                    el: '.swiper-pagination',
                },
                autoplay: {
                    delay: 3000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                loop: true,
                on: {
                    navigationShow: function () {
                        console.log('按钮显示了');
                    },
                },
            });
        }
    },
};
</script>

<style lang="less" scoped>
.title {
  text-align: center;
  line-height: 50px;
}

.swiper-slide {
  img {
    width: 100%;
  }
}
</style>

四、使用的框架 react17 + swiper6 （同样兼容 ts 项目，无需特殊处理）

直接引入css会报错，我安装的 swiper8.0.6 版本，如图所示


微信截图_20220225152340.png

查看相应报错、ERROR in ./src/App.js 6:0-38
Module not found: Error: Package path ./swiper-bundle.min.css is not exported from package D:\codeWork\swiper\swiperreact\node_modules\swiper (see exports field in D:\codeWork\swiper\swiperreact\node_modules\swiper\package.json)
说是package.json没有导出相应的包，当然、这个错误在vue中是没有的，那么我们就打开swiper的package.json、如图所示


微信截图_20220225154129.png
很明显，已经导出来了，只是引入的包的名称需要变一下，代码如下： 
import './App.css';

// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
import "swiper/css/bundle";

// swiper.less/sass/css 决定了基础的样式
import "swiper/css";

import Swiper, {
  Autoplay,
  EffectCoverflow,
  EffectCube,
  Pagination,
  Navigation,
} from "swiper";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);

function App() {

  new Swiper(".swiper1", {
    pagination: {
      el: ".swiper-pagination",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
      hideOnClick: true,
    },
    autoplay: {
      delay: 3000,
      stopOnLastSlide: false,
      disableOnInteraction: false,
    },
    on: {
      navigationShow: function () {
        console.log("按钮显示了");
      },
    },
  });

  return (
    <div className="App">
      <div className="home">
        <div className="title">基本效果-小圆点和左右切换</div>
        <div className="swiper-container swiper1">
          <div className="swiper-wrapper">
            <div className="swiper-slide">
              <img src={require("./assets/1.png")} alt="" />
            </div>
            <div className="swiper-slide">
              <img src={require("./assets/2.png")} alt="" />
            </div>
            <div className="swiper-slide">
              <img src={require("./assets/3.png")} alt="" />
            </div>
          </div>
          <div className="swiper-pagination"></div>

          <div className="swiper-button-prev"></div>
          <div className="swiper-button-next"></div>
        </div>
      </div>
    </div>
  );
}

export default App;

五、需要哪些模块，直接去定义文件里面找，按住ctro 鼠标放在 swiper 上，直接就跳转到swiper.d.ts中；

微信截图_20210326104455.png

引入相应的模块后，可以参照官网文档设计想要的效果，和之前的使用方式一样；

https://www.swiper.com.cn/

完成，如果有全局引入的方式，还求大神们指点，不胜感激；

上一篇下一篇

猜你喜欢

热点阅读