我正在使用swiper-js(https://swiperjs.com/(滑动几container。在我的容器中，我存储了一个小box的水平滚动滑块。我可以在桌面上正确滑动它们，但在移动 Web 查看器上无法滑动。所以是的，我需要一些帮助。
new Swiper(document.querySelector("div.swiper-container"), {
direction: "horizontal",
speed: 300,
spaceBetween: 5,
slidesPerView: 1,
loop: false,
cssMode: false,
allowSlideNext: true,
allowSlidePrev: true,
centeredSlides: true,
centeredSlidesBounds: true,
updateOnWindowResize: true,
centerInsufficientSlides: true,
pagination: {
el: document.querySelector("div.swiper-pagination"),
clickable: true,
hideOnClick: false,
dynamicBullets: true
},
navigation: {
nextEl: document.querySelector("div.swiper-button-next"),
prevEl: document.querySelector("div.swiper-button-prev"),
hideOnClick: false
}
});
$('*').bind('touchmove', false);html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
} div.swiper-container {
height: 75%;
width: 90%;
} div.swiper-wrapper, div.swiper-slide {
height: 100%;
width: 100%;
} container {
height: 100%;
width: 100%;
background-color: green;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
} container div {
height: 50%;
width: 50%;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
} box {
height: 100%;
width: 95%;
background-color: red;
display: inline-block;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
<div class="swiper-container">
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<container>
<div>
<box></box>
<box></box>
<box></box>
</div>
</container>
</div>
<div class="swiper-slide">
<container>
<div>
<box></box>
<box></box>
<box></box>
</div>
</container>
</div>
<div class="swiper-slide">
<container>
<div>
<box></box>
<box></box>
<box></box>
</div>
</container>
</div>
</div>
</div>
</body>
</html>在脚本中添加以下代码，这将在移动和桌面上正常工作
$('*').bind('touchmove', false);
尝试将其添加到您的 CSS 中
.div.swiper-container{
touch-action: pan-y;
}