swiper一屏切换，内部滚动不影响slide切换

移动端Swiper切换与表格滚动冲突解决

原创已于 2024-10-11 11:49:51 修改 · 911 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #css

于 2024-10-11 11:41:44 首次发布

前言

我在做移动端项目是，需要用到swiper 切换展示，但是遇到一个恼火的，有个swiper-slide 页有表格数据，内容太多了需要表格内滚动。在网上找了很多方法都不能解决，最后用不是很好的方法但能解决切换和表格内滚动不冲突。

先看我在网上找过的方法

事件阻止默认行为
在需要内部滚动的地方加入 e.preventDefault(); 效果无用

document.querySelector('.t-cont').addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false });

设置Swiper 的 noSwiping 选项
只能控制当页slide禁止滚动，如果后面还有slide就无用像以下代码在第二个swiper-slide中加入了noSwipingClass，但是我后面还有两个swiper-slide，这里禁用了切换，怎么切换下一页呢，也许有办法，但比较麻烦

<div class="swiper">
	<div class="swiper-wrapper">
		<div class="swiper-slide" style="background: url(/material/img/bg2.jpg) no-repeat;background-size: 100%;">
			<p>第一页</p>
		</div>
		<div class="swiper-slide pannel-c" style="background: url(/material/img/bg3.jpg) no-repeat;background-size: 100%;">
	    	<p>第二页</p> 
		</div>
		<div class="swiper-slide" style="background: url(/material/img/bg4.jpg) no-repeat;background-size: 100%;">
            <p>第三页</p>
    	</div>
        <div class="swiper-slide" style="background: url(/material/img/bg5.jpg) no-repeat;background-size: 100%;">
            <p>第四页</p> 
        </div>
    </div>
</div>

var swiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    noSwiping: true, // 禁用滑动
    noSwipingClass: 'pannel-c' // 指定禁用滑动的Slide类名
});

还看到有说swiper嵌套的，好像可以，但是对于每个swiper-slide 的height都是100vh 不起作用。相关文章，文章链接

我自己写的

我是把要滚动的内容提出去当做一个页面，用iframe引入，这样表格内容是归另一个页面管，不属于swiper。所以表格内滚动不影响swiper切换
预览链接

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>swiper slide内滚动</title>
    <link rel="stylesheet" href="http://39.104.18.107/tool/swiper10.0.4.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .main {
            max-width: 750px;
            min-width: 320px;
            width: 100%;
            margin: 0 auto;
            font-size: .32rem;
        }
        .swiper-slide img {
            width: 100%;
            object-fit: cover;
        }
        .swiper-slide p {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0 auto;
            text-align: center;
            color: #5a5a5a;
            font-weight: bold;
            font-size: 1rem;
        }
        .swiper-wrapper {
            width: 100%;
            height: 100vh;
        }
        .my-iframe {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>
<body>
    <section class="main">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background: url(/material/img/bg2.jpg) no-repeat;background-size: 100%;">
                    <p>第一页</p>
                </div>
                <div class="swiper-slide" style="background: url(/material/img/bg2.jpg) no-repeat;background-size: 100%;">
                    <iframe class="my-iframe" src="tables.html" style="width: 5.6rem;height: 55vh; "
                        frameborder="0"></iframe> 
                </div>
                <div class="swiper-slide" style="background: url(/material/img/bg3.jpg) no-repeat;background-size: 100%;">
                    <p>第二页</p>
                </div>
                <div class="swiper-slide" style="background: url(/material/img/bg4.jpg) no-repeat;background-size: 100%;">
                    <p>第三页</p>
                </div>
                <div class="swiper-slide" style="background: url(/material/img/bg5.jpg) no-repeat;background-size: 100%;">
                    <p>第四页</p> 
                </div>
            </div>
        </div>
    </section>
    <script src="/tool/jquery-2.0.3.min.js"></script>
    <script src="/tool/swiper10.0.4.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper', {
            direction: 'vertical',
        });
    </script>
</body>
</html>

<!-- tables.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .tables {
            background: #ffffff;
            overflow: auto;
        }
        table,
        th,
        td {
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center;
            padding: 4px 6px;
            font-size: .32rem;
        }
    </style>

    <script>
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    if (clientWidth >= 750) {
                        docEl.style.fontSize = '100px';
                    } else {
                        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                    }
                };

            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</head>

<body>
    <div class="tables">
        <table style="width: 100%;">
            <tr>
                <th style="width: 42%;">省份</th>
                <th style="width: 58%;">城市</th>
            </tr>
            <tbody>
                <tr>
                    <td>北京市</td>
                    <td>北京市</td>
                </tr>
                <tr>
                    <td>天津市</td>
                    <td>天津市</td>
                </tr>
                <tr>
                    <td>上海市</td>
                    <td>上海市</td>
                </tr>
                <tr>
                    <td>重庆市</td>
                    <td>重庆市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>哈尔滨市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>齐齐哈尔市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>黑龙江省</td>
                    <td>江市</td>
                </tr>
                <tr>
                    <td>内蒙古自治区</td>
                    <td>呼和浩特市</td>
                </tr>
                <tr>
                    <td>内蒙古自治区</td>
                    <td>包头市</td>
                </tr>
                <tr>
                    <td>内蒙古自治区</td>
                    <td>乌海市</td>
                </tr>
                <tr>
                    <td>内蒙古自治区</td>
                    <td>赤峰市</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>