一个简易的H5数据展示效果【demo】

先上效果图，正常展示：

向上滑动搜索框部分：

向下滑动搜索框部分：

实现代码如下：

<!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>

拷贝至本地可直接运行查看效果。

待优化：

扫描二维码关注公众号，回复： 3398172 查看本文章

数据滚动到顶部自动触发搜索框下滑效果，数据上滑查看的时候自动触发搜索框上滑的效果。

（判断滚动条事件即可，此部分简单就不做下去了，有兴趣的自行尝试）

一个简易的H5数据展示效果【demo】

猜你喜欢