使用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部分
- 搭建好swiper初始框架:swiper-container>swiper-wrapper>及多个swiper-slide (此时外层container为1)
- 在大于屏幕宽度的swiper-slide下级,嵌套swiper-container>swiper-wrapper>一个swiper-slide (此时嵌套container为2)
-
js部分
-
参照js代码注释,使用swiper中回调函数。
-
首先判断是否页面滑动到长度大于屏幕的swiper-slide中;
如果是,关闭外层swiper-container的鼠标控制(此时swiper-container2中的页面可以由鼠标滚轴滑动)
-
然后使用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
上一篇: 雨事四件