VUE3.0使用vue-awesome-swiper

升级到vue3.0以后，就不能单纯在main.js中use来使用swiper了。vue2.0在之前的文章中有些过就不在展开描述。

vue2.0的简单使用

• 安装包

本人使用的是6.0.0和4.1.1的版本。安装后的package.json如下。

  "dependencies": {
    "swiper": "^6.0.0-alpha.18",
    "vue-awesome-swiper": "^4.1.1",
  },

• 安装完成后，在需要swiper的地方引入swiper

import Swiper, {
  Autoplay,
  EffectCoverflow,
  EffectCube,
  Pagination,
  Navigation,
} from "swiper";

// swiper-bundle.min.css 决定了小圆点和左右翻页标签，如果不需要可以不引用
import "swiper/swiper-bundle.min.css";
// swiper.less/sass/css 决定了基础的样式
import "swiper/swiper.scss";
Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination, Navigation]);

• 在初始化的地方，创建swiper对象

    onMounted(() => {
      new Swiper(".swiper1", {
        direction: 'vertical',
        // direction: 'vertical',
        slidesPerView: 'auto',
        freeMode: true,
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        mousewheel: true,
      });
    });

• 页面使用class来引入

<div class="info_list_content swiper swiper-container swiper1">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div v-for="(item, index) in infoList" :key="index">
                  <rh-image
                    :src="item.src"
                    :width="item.width"
                  />
                </div>
              </div>
            </div>
          </div>