极客观点
项目管理
HarmonyOS
我的代码如下：
<template>
<swiper
:modules="modules"
direction="vertical"
:slides-per-view="auto"
:free-mode="true"
:scrollbar="{el: '.swiper-scrollbar', draggable: true}"
>
<swiper-slide><img src="@/assets/only/case2.jpg"></swiper-slide>
</swiper>
<div class="swiper-scrollbar"></div>
</template>
<script>
import { Scrollbar } from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue.js'
import 'swiper/swiper-bundle.min.css'
import 'swiper/modules/scrollbar/scrollbar.min.css'
export default ({
components: {
Swiper,
SwiperSlide
},
setup () {
return {
modules: [Scrollbar]
}
}
})
</script>
<style lang="scss" scoped>
.swiper {
width: 100%;
height: 60vh;
}
.swiper-slide {
height: auto;
}
</style>
case2.jpg是张长图，足以突破设备画面高度，但是swiper页面无法内容无法滚动
按照官网的示例是可以滚动的，但官网是非vue静态页面，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="swiper-bundle.min.css" />
<style>
.swiper {
width: 100%;
height: 60vh;
}
.swiper-slide {
height: auto;
}
</style>
</head>
<body>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="@/assets/only/case2.jpg"></div>
</div>
<div class="swiper-scrollbar"></div>
</div>
<script src="swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
direction: "vertical",
slidesPerView: "auto",
freeMode: true,
scrollbar: {
el: ".swiper-scrollbar",
},
mousewheel: true,
});
</script>
</body>
</html>请问是为什么呢？
已解决，高版本swiper示例还需参考
https://swiperjs.com/demos#sc...