1、展开/收起面板
交互逻辑目标
-
面板初始高度为 minHeight（如 200px）
-
当用户上滑面板时，它伸展到一个较高的 expandedHeight（如 400px）
-
面板内部内容开始滚动，面板不再继续伸展
-
当内容滚动到顶部后，若继续下滑，面板会收缩回初始高度
最佳用户体验设计方案
你希望模拟的是类似微信、支付宝等底部滑出面板的交互。为此，我们使用下面这些关键逻辑：
-
利用 touchstart / touchmove / touchend 实现面板伸缩
-
在面板高度为 expanded 时，允许内容滚动
-
内容滚动到顶部并继续向下滑，则收回面板
完整实现代码如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>滑动展开/收起面板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box; }
body {
margin: 0;
font-family: sans-serif;
overflow: hidden;
background: #f0f0f0;
}
.panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 200px
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
