实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动效果</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 1.8rem;
line-height: 5rem;
}
body {
background: #557669;
}
.content {
width: 100%;
height: 30%;
overflow: auto;
background: white;
position: absolute;
bottom: 0;
}
.searchInput {
position: fixed;
width: 100%;
height: 4rem;
margin-top: -4rem;
line-height: 4rem;
text-align: center;
background: white;
border-bottom: 1px solid #666;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
li {
height: 5rem;
border-bottom: 1px solid #666;
}
</style>
<body>
<div class="content">
<div class="searchInput">搜索框</div>
<ul>
<li>测试数据1</li>
<li>测试数据2</li>
<li>测试数据3</li>
<li>测试数据4</li>
<li>测试数据5</li>
<li>测试数据6</li>
<li>测试数据7</li>
<li>测试数据8</li>
<li>测试数据9</li>
<li>测试数据10</li>
<li>测试数据11</li>
<li>测试数据12</li>
</ul>
</div>
</body>
<script type="text/javascript">
/*判断上下滑动：*/
$('.searchInput').bind('touchstart', function (e) {
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
});
$(".searchInput").bind("touchend", function (e) {
//获取滑动结束时屏幕的X,Y
// e.originalEvent = event
endX = e.originalEvent.changedTouches[0].pageX;
endY = e.originalEvent.changedTouches[0].pageY;
//获取滑动距离
distanceX = endX - startX;
distanceY = endY - startY;
//判断滑动方向
if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
console.log('往右滑动');
} else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
console.log('往左滑动');
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
console.log('向上滑动');
// $(".content ").animate({ height: "70%" })
var contentStyle = $(".content ").attr("style");
if (!contentStyle || contentStyle == "height: 30%;") {
$(".content ").animate({ height: "70%" })
} else if (contentStyle == "height: 0%;") {
$(".content ").animate({ height: "30%" })
}
} else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
console.log('向下滑动');
// $(".content ").animate({ height: "30%" })
var contentStyle = $(".content ").attr("style");
if (!contentStyle || contentStyle == "height: 30%;") {
$(".content ").animate({ height: "0%" })
} else if (contentStyle == "height: 70%;") {
$(".content ").animate({ height: "30%" })
}
}
});
</script>
</html>拷贝至本地可直接运行查看效果。
待优化：
数据滚动到顶部自动触发搜索框下滑效果，数据上滑查看的时候自动触发搜索框上滑的效果。
（判断滚动条事件即可，此部分简单就不做下去了，有兴趣的自行尝试）