vue3中使用swiper7

admin

项目场景：
前不久刚在我的vue3项目中用了swiper6，坑真的是比农村的泥路还要多，这不官方直接来了个swiper7，接下来手把手教下大家怎么用，让大家少走弯路。

另外swiper7的话不会出现打包后放服务器样式丢失的情况了=》swiper6打包后样式丢失

普通vue3项目：
win10的小伙伴我们可以先在桌面（或者文件夹里）按住Shift之后点击右键打开Powershell窗，不是的自己打开cmd，效果是一样的。

之后在命令行里面输入vue create vue3

接着选择创建默认的vue3项目

接着用VSCode编辑器打开项目，在命令输入npm i swiper，成功后package.json文件中会标上

接着我在官网找了个功能比较全的代码作为例子，如下：

[mw_shl_code=applescript,true]<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  // Import Swiper styles
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y],
      };
    },
  };
</script>
[/mw_shl_code]
我们把它拷到App.vue中全部替换掉之后执行，你会发现报css依赖不存在的错误，

我们打开node_modules文件夹，找到swiper文件夹，你会发现这下路径指向都是不明确的，所以接下来们要手动修改一下路径，

把js的路径换成vue文件夹下的swiper-vue.js

默认基础样式用swiper目录下的swiper.min.css

接着我们打开modules目录，把用到的组件路径都改一下，然后久违的绿它色终于出现了

如果嫌麻烦可以直接用总样式，在swiper目录下的swiper-bundle.css或者压缩版swiper-bundle.min.css，

然后你在浏览器看到的样子是这样的，麻的什么鬼，官方真的是(╯°Д°)╯︵┻━┻

这是因为官方例子里默认一次显示3个滑块，而例子只有3个swiper-slide，之后就用省略号了

我们把它改成1并且添加点样式后看下效果：

最终的代码：

[mw_shl_code=applescript,true]<template>
  <swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";

/**
* 如果嫌麻烦可以把上面的全部样式都删了，直接用总的
* bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）
*/
// import "swiper/swiper-bundle.min.css";

// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y],
    };
  },
};
</script>
<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}
</style>
[/mw_shl_code]
vue3+typeScript项目：
我们先在桌面打开命令行，输入vue create vue3-ts

我们选择自定义项目

接着选这三项就好了，其他可以先不用

选择3.x

之后的配置看着选，问题不大

同样的，先在命令输入npm i swiper把swiper7装上

因为ts的书写方式不一样，不可以直接用官方的例子，所以就不一一粘贴显示了，直接上改好了的，把下面的代码全部替换到App.vue文件就可以了，显示的效果是和普通项目一样的我就不展示了。
[mw_shl_code=applescript,true]
<template>
  <swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script lang="ts">
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";

/**
* 如果嫌麻烦可以把上面的全部样式都删了，直接用总的
* bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）
*/
// import "swiper/swiper-bundle.min.css";


import { defineComponent } from "vue";

export default defineComponent({
  name: "",
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper: any) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y],
    };
  },
});
</script>
<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}
</style>
[/mw_shl_code]
组件样式修改：
因为vue为了不让单页的样式污染全局，通常会在style标签加上scoped，这就导致了我们无法替换掉组件的样式，所以我们可以用::v-deep把样式抛出去替换到全局的，比方说我们要把swiper的pagination页面小圆点改成白色，那么样式就可以这样写：
[mw_shl_code=applescript,true]<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet {
  background: rgb(255, 255, 255);
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active {
  background: rgb(255, 255, 255);
}
</style>
[/mw_shl_code]
当然，有些小伙伴会说我要用 CSS 预处理器，比方说scss，那么就可以用:deep()，这样写：

顺便提一下，目前vue3中并不支持最新版的sass，我们可以用4.14.1的 node-sass搭配7.3.1的sass-loader使用
npm install node-sass@^4.14.1 -D
npm install sass-loader@^7.3.1 -D
[mw_shl_code=applescript,true]<style lang="scss" scoped>
.swiper:deep() {
  .swiper-slide {
    height: 300px;
    line-height: 300px;
    font-size: 30px;
    text-align: center;
    background-color: pink;
  }
  .swiper-pagination {
    .swiper-pagination-bullet {
      background: rgb(255, 255, 255);
    }
    .swiper-pagination-bullet-active {
      background: rgb(255, 255, 255);
    }
  }
}
</style>
[/mw_shl_code]
效果：

关于垂直方向：
关于垂直方向的官方文档在这：#Vertical，但是目前给的vue的demo代码竟然还是6.x的，真的是(╯°Д°)╯︵┻━┻。好了，想要把轮播图设置为垂直方向，要在swiper标签里加上:direction="'vertical'"，这里注意了，vertical一定要有两对引号包裹的，不管单引号在里还是外，否则不生效，加了这个参数后你会发现滚动轮播图时会散架，所以还要给swiper设置实高，非要用百分比的话就在swiper标签外套一个div，在div里给个实际高度就好，具体看下面代码：
[mw_shl_code=applescript,true]<template>
  <swiper
    :direction="'vertical'"
    :modules="modules"
    :pagination="{ clickable: true }"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script>
// import Swiper core and required modules
import { Pagination } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";
// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Pagination]
    };
  },
};
</script>
<style scoped>
.swiper {
  height: 100vh;
}
.swiper-slide {
  height: 100%;
  line-height: 100vh;
  font-size: 30px;
  text-align: center;
  background-color: skyblue;
}
</style>
[/mw_shl_code]
效果：


关于无限循环：
需要开启无限循环的话在swiper标签上加入:loop="true"参数就可以了，但是你会发现swiper为了衔接多生成的两个swiper-slide并没有引用上我们自己设置的样式：

所以我们用deep处理一下就好:

[mw_shl_code=applescript,true]<template>
  <swiper :modules="modules" navigation :loop="true">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Navigation]
    };
  },
};
</script>
<style scoped>
.swiper::v-deep .swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: lightgreen;
}
</style>
[/mw_shl_code]