使用swiper插件，全屏翻页时，某一页的页面长度超过900px，嵌套问题解决

​ 问题描述：在使用swiper进行全屏翻页效果制作时，某页的高度超过900px，且不固定。

结果在使用鼠标滚轴翻页过程中，只会进行swiper-slide切换，而大于屏幕的swiper-slide部分却无法显示

一、解决思路

• html部分

  1. 搭建好swiper初始框架：swiper-container>swiper-wrapper>及多个swiper-slide （此时外层container为1）
  2. 在大于屏幕宽度的swiper-slide下级，嵌套swiper-container>swiper-wrapper>一个swiper-slide （此时嵌套container为2）

• js部分

  • 参照js代码注释，使用swiper中回调函数。

    1. 首先判断是否页面滑动到长度大于屏幕的swiper-slide中；

       如果是，关闭外层swiper-container的鼠标控制（此时swiper-container2中的页面可以由鼠标滚轴滑动）

    2. 然后使用swiper回调函数，获取swiper-container2中是否滑动到顶部或者底部。由此控制swiper-container1中的鼠标滚轴。

二、代码

1、css部分

    html, body { position: relative;height: 100%;}
    .swiper-container {width: 100%;height: 100%;}
	#swiper-container2 .swiper-slide {font-size: 18px;height: auto;box-sizing: border-box;display:block;
        line-height:100px; background: #4390EE;color: #fff; }

2、html部分

	<div class="swiper-container" id="swiper-container1">
			<div class="swiper-wrapper"">
				<div class=" swiper-slide" style="height: 911px;">Slide 1</div>
			<div class="swiper-slide" style="height: 911px;">
				<div class="swiper-container " id="swiper-container2">
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<h4>一段很长的内容</h4>
							<p>一<br>段<br>很<br>长<br>的<br>内<br>容</p>
							<p>一<br>段<br>很<br>长<br>的<br>内<br>容</p>
							<p>一<br>段<br>很<br>长<br>的<br>内<br>容</p>
						</div>
					</div>
					<div class="swiper-scrollbar">
						<div class="swiper-scrollbar-drag"></div>
					</div>
					<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
				</div>
			</div>
			<div class="swiper-slide" style="height: 911px;">Slide 3</div>
			<div class="swiper-slide" style="height: 911px;">Slide 4</div>
			<div class="swiper-slide" style="height: 911px;">Slide 5</div>
		</div>
		<!-- Add Pagination -->
		<div class="swiper-pagination">
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span>
			<span class="swiper-pagination-bullet"></span></div>
		<span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
		</div>

3、js部分

window.onload = function() {
				var mySwiper1 = new Swiper('#swiper-container1', {
					direction: 'vertical',  //页面滑动的方向
					mousewheel: true,   //开启鼠标滚轮控制翻页
					pagination: {
						el: '.swiper-pagination',
						clickable: true, //开启点击分页器进行跳转
					},
					on: {  //slideChangeTransitionEnd回调函数，swiper从一个slide过渡到另一个slide结束时执行。
                        	//this.mousewheel.disable()禁止鼠标滚轴控制。
                        	//此时是当进入页面2时，关闭container1的鼠标滚轴控制
						slideChangeTransitionEnd: function() {
							if (this.activeIndex == 1) {this.mousewheel.disable();}
						},
					}
				});

				var swiper = new Swiper('#swiper-container2', {
					direction: 'vertical',
					slidesPerView: 'auto',  //设置slider容器能够同时显示的slides数量
					freeMode: true,  //动量反弹。slides通过惯性滑动到边缘时，无法反弹。
					scrollbar: {el: '.swiper-scrollbar',}, //为Swiper增加滚动条。
					mousewheel: true,
                    //当在container2中滚到最下方，或者最上面的时候都会开启container1的鼠标滚轴控制
					on: {reachEnd: function() { //回调函数，当Swiper切换到最后一个Slide时执行(长页面滑动到底部的时候)
                        mySwiper1.mousewheel.enable();//开启container1的滚轴控制
                    },
						reachBeginning: function() {//回调函数，Swiper切换到初始化位置时执行
                            mySwiper1.mousewheel.enable();}
					}
				});
			}

swiper版本号：5.4.5 整理日期：2020/10/14

本文地址：https://blog.csdn.net/free_pi/article/details/109385469