vue3+TS中vue-awesome-swiper使用
2021-07-14 16:43:40
安装方法我们还是跟着官网走 vue-awesome-swiper
安装: npm install swiper vue-awesome-swiper --save安装上的版本就是swiper6.x了
终于,我还是把vue-awesome-swiper引入到了我的vue3+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="图片自己上" alt="" /> </div> <div class="swiper-slide"> <img src="图片自己上" alt="" /> </div> <div class="swiper-slide"> <img src="图片自己上" 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="图片自己上" alt="" /> </div> <div class="swiper-slide"> <img src="图片自己上" alt="" /> </div> <div class="swiper-slide"> <img src="图片自己上" 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="图片自己上" alt="" /> </div> <div class="swiper-slide"> <img src="图片自己上" alt="" /> </div> <div class="swiper-slide"> <img src="图片自己上" alt="" /> </div> </div> </div> </template> <script lang="ts"> import { defineComponent, onMounted } from 'vue' 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]) export default defineComponent({ components: {}, setup() { onMounted(() => { const ss = 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('按钮显示了') } } }) const ss1 = 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 } }) const ss2 = 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>
用官方的00-typescript-composition-api.vue栗子,折腾了我好久,完全是不行的
另外我使用的版本是 "swiper": "^6.0.0-alpha.18", "vue-awesome-swiper": "^4.1.1"