解决办法
使用插件swiper插件
安装办法
--npm 安装
npm install swiper
--pnpm 安装
npm install swiper
官方文档
官方文档
Swiper Vue.js Components (swiperjs.com)
vue演示文档
Swiper Vue.js Components (swiperjs.com)
示例
<template>
<swiper
:direction="'vertical'"
:pagination="{
clickable: true,
}"
:modules="modules"
class="mySwiper"
>
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
<swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
<swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
</swiper>
</template>
<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';
import './style.css';
// import required modules
import { Pagination } from 'swiper/modules';
export default {
components: {
Swiper,
SwiperSlide,
},
setup() {
return {
modules: [Pagination],
};
},
};
</script>
把轮播内容换成页面内容即可实现滑动效果