欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 15:17:19
​问题描述:在使用swiper进行全屏翻页效果制作时,某页的高度超过900px,且不固定。结果在使用鼠标滚轴翻页过程中,只会进行swiper-slide切换,而大于屏幕的swiper-slide部分却无法显示一、解决思路html部分搭建好swiper初始框架:swiper-container>swiper-wrapper>及多个swiper-slide (此时外层container为1)在大于屏幕宽度的swiper-slide下级,嵌套swiper-container&....

​ 问题描述:在使用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

相关标签: css javascript