Swiper中文论坛

标题: 求助，两屏垂直滚动，第一屏全屏，如果实现第二屏不全屏 [打印本页]

作者: which 时间: 2016-12-1 09:48
标题: 求助，两屏垂直滚动，第一屏全屏，如果实现第二屏不全屏
比如：要做两屏垂直滚动（上下滑），第一屏全屏，第二屏的高度是2000px，如何实现？

作者: Neo 时间: 2016-12-3 20:26
在不一个层上就行了

作者: Neo 时间: 2016-12-3 20:28
分层，第二个id浮在全屏的上面

作者: admin 时间: 2017-1-3 23:15
高度2000的可以做滚动

作者: xudong 时间: 2017-2-12 20:08

Neo 发表于 2016-12-3 20:28
分层，第二个id浮在全屏的上面

你好，怎么让第二个浮在全屏上面，具体是怎么做的

作者: xudong 时间: 2017-2-12 22:23
你好，这个问题你解决了吗

作者: 单身飞过撒哈拉 时间: 2017-2-13 14:07
你好，这个问题你解决了吗

作者: koala1024 时间: 2017-2-27 15:36
前几天正好也有这个需求，之前自己写了一段js，万恶的IOS下滑动惯性导致暴力操作有问题。特地结合swiper重写了这个功能。demo如下，请无视一些无关紧要的文字内容

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">


<link rel="stylesheet" href="css/swiper.min.css">


<style>
html, body {
      position: relative;
      height: 100%;overflow: hidden;
}
body {
      background: #fff;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
}
.swiper-container {
      width: 100%;
      height: 100%;
}
.page2 {
      font:18px '微软雅黑' ;
      height: auto;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
}
.page2 p,.page2 h4 {padding: 30px;}
.wrap {height: 100%;}
.page1 {height:100%;background:url(images/bg.jpg) no-repeat #2a3c4d;background-size:cover;}
.next {position: absolute;bottom: 5%;left:50%;width: 20px;height:20px;border-right: 2px solid #fff;border-bottom: 2px solid #fff; transform:translateX(-50%) rotate(45deg);}
.movetips {position: absolute;font-size: 12px;text-align:center;top:-20px;color: #818080;width: 100%;}
</style>
</head>
<body>
<div class="wrap">
<div class="page1"><div class="next"></div></div>
<div class="swiper-container">
      <div class="swiper-wrapper">
         <div class="swiper-slide page2">
            <div class="movetips">继续拖动返回上一页</div>
            <h4>绝顶聪明</h4>
            <p style="font-family:microsoft yahei; line-height:1.8;">一天下午，我同学在建设银行十分无聊的上班，一个穿得很糟糕的女士(神经病患者)来到他窗口，给了他一张纸条要提款。 <br><br>
纸条上赫然写着 <br><br>
'兹派XX同志于贵银行处提取人民币'. <br>
然后是l后面N多个零元。 <br>
落款是***C.P中央办公厅***。 <br><br>
我同学本来想报警,可看该神经病患者女子很认真的样子,想想还是打发给保安算鸟.(~估计保安也是很闲). <br>
果然,保安对该女子说:'你这张条子想要提款,必须先到对面派出所,找所长盖一个章，他盖完章,你再来取钱就没问题啦。' <br>
该女子想都没想，直接就向派出所走去了。(这保安还真不一般,平时有点小看他了). <br><br>
大概十多分钟，排队的顾客慢慢多起来的时候，那个女子兴高采烈的回来了，举着那个条子，说：'人家说啦，办公程序简化了，不用所长批条直接就可以取钱啦。' <br><br>
我这个同学一听到这就不住的感叹:pol.ice队伍里真有高人，一句'高调'就给打发回来了。 <br><br>
我这个同学和保安当时就有点傻了，营业大厅有很多人都在，怕她精神病发作起来影响正常的秩序，只好把值班主管找来了。 <br><br>
主管和女患者在一边聊了几句，问你取钱做什么用呀,女患者说:'取钱买面包,蛋糕,吃的,买穿的'主管指了指不远处的地方，该女子就又高高兴兴地走了。 <br>
保安去请教'高招',主管当时是这样对女患者说的: '我们这里是建行,只有建房子才能到这里取钱。你取钱买吃的,那肯定是粮食了,要去农行,买穿的等东西,取钱要到工商银行才行！' <br>
我同学打心眼里佩服呀,到底是当主管的啊!!!! <br><br>
………… <br>
………… <br>
过了一会儿,该女士又回来了.而且带来了工行的回答:'农行的人说了,这里是农行,只有农民能取钱,我是城市人口,工行的人说了,我们这里是公行,只能公的来取,母的不行!!!!,说我是贱人,要到建行取钱' </p>
         </div>
      </div>
      
      <div class="swiper-scrollbar"></div>
</div>

</div>

<script src="js/zepto.min.js"></script>

<script src="js/swiper.min.js"></script>

<script>
$(function(){
var pressY = 0; //初始触摸点位置
var isMove = true; //当前在第一页上
var deltaY; //滑动距离
obj = $(".wrap"); //主框架
topPage = $('.page1'); //第一屏
nextPage = $('.next');
topPage.bind('touchstart',touchStart,false);

function touchStart(e){
e.preventDefault();
var touch = e.changedTouches[0];
pressY = touch.pageY;
if(isMove){
obj.bind('touchmove',touchMove,false);
obj.bind('touchend',touchEnd,false);
}
}

function touchMove(e){
if(isMove){
if (e.targetTouches.length == 1) {//只允许一个触摸点
var touch = e.changedTouches[0];
deltaY = touch.pageY - pressY;
if(deltaY < 0){ //up
obj.css({"-webkit-transition":"0s ease -webkit-transform"});
obj.css({"-webkit-transform":"translate3d(0,"+deltaY+"px,0)"});
}
}
}
}

//page1 end事件
function touchEnd(){
if(deltaY <= -100 && isMove){
moveNext()
}else if((deltaY < 0 && deltaY > -100) || isMove){
recover();
}
setTimeout(function(){
deltaY = 0;
},100);
}

//按钮触发跳转至第二屏
nextPage.on('touchend',function(){
moveNext()
})

function recover(){
obj.css({"-webkit-transition":"0.3s ease -webkit-transform"});
obj.css({"-webkit-transform":"translate3d(0,0,0)"});
setTimeout(function(){//回弹之后删除style，避免再次触发事件时候抖动
obj.removeAttr('style');
},300);
}

function moveNext(){
obj.css({"-webkit-transition":"0.3s ease -webkit-transform"});
obj.css({"-webkit-transform":"translate3d(0,-100%,0)"});
isMove = false;
obj.unbind('touchmove');
}

//swiper
var mySwiper = new Swiper('.swiper-container', {
scrollbar: '.swiper-scrollbar',
direction: 'vertical',
slidesPerView: 'auto',
mousewheelControl: true,
freeMode: true,
onTouchEnd:function(swiper){
window.late = mySwiper.getWrapperTranslate();
if(window.late > 40){
obj.css({"-webkit-transition":"0.3s ease -webkit-transform"});
obj.css({"-webkit-transform":"translate3d(0,0,0)"});
setTimeout(function(){
isMove = true;
},500);
}
}
});

})
</script>

</body>
</html>

作者: xudong 时间: 2017-2-28 09:58

koala1024 发表于 2017-2-27 15:36
前几天正好也有这个需求，之前自己写了一段js，万恶的IOS下滑动惯性导致暴力操作有问题。特地结合swiper重 ...

按照你的代码，好像不行啊，是不是哪里出错了

作者: xudong 时间: 2017-2-28 10:15

xudong 发表于 2017-2-28 09:58
按照你的代码，好像不行啊，是不是哪里出错了

我明白了

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)