升级到vue3.0以后，就不能单纯在main.js中use来使用swiper了。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>
