两个菜单页面组成的手机页面滑动加载更多

最新推荐文章于 2019-01-17 15:00:00 发布

csmzl

最新推荐文章于 2019-01-17 15:00:00 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Web 文章标签： jquery html 手机触摸上滑加载更多

本文链接：https://blog.youkuaiyun.com/csmzl/article/details/72638829

Web 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和jQuery实现的手机页面设计方案，该方案包含两个菜单页面，并支持通过触摸上滑加载更多记录的功能，最多可加载30条记录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

两个菜单页面组成的手机页面滑动加载更多，触摸上滑可以加载更多记录，最多30条。最多加载数和每次加载数都可在jquery中配置。

HTML

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <title></title>
        <script type="text/javascript" src="../js/jquery-1.12.1.js"></script>

    </head>

    <body>
        <nav style="width:100%">
            <span class="menuClass nav-active" id="spanMenuOne" onclick="switchMenu(this.id)">菜单一</span>
            <span class="menuClass" id="spanMenuTwo" onclick="switchMenu(this.id)">菜单二</span>
        </nav>
        <div class="main" style="width:100%">
            <div id="MenuOne">
                <ul class="ulClass">
                    <li class="liClass">
                        <div class="lileft">菜单一第1项第1列</div>
                        <div class="liright">菜单一第1项第2列</div>
                    </li>
                    <li class="liClass">
                        <div class="lileft">菜单一第2项第1列</div>
                        <div class="liright">菜单一第2项第2列</div>
                    </li>
                    <li class="liClass">
                        <div class="lileft">菜单一第3项第1列</div>
                        <div class="liright">菜单一第3项第2列</div>
                    </li>
                    <li class="liClass">
                        <div class="lileft">菜单一第4项第1列</div>
                        <div class="liright">菜单一第4项第2列</div>
                    </li>
                    <li class="liClass">
                        <div class="lileft">菜单一第5项第1列</div>
                        <div class="liright">菜单一第5项第2列</div>
                    </li>
                </ul>
            </div>
            <div id="MenuTwo" style="display: none;">
                <ul class="ulClass">
                    <li class="liClass">
                        <div class="lileft">菜单二第1项第1列</div>
                        <div class="liright">菜单二第1项第2列</div>
                    </li>
                    <li class="liClass">
                        <div class="lileft">菜单二第2项第1列</div>
                        <div class="liright">菜单二第2项第2列</div>
                    </li>
                    <li class="liClass">
                        <div class="lileft">菜单二第3项第1列</div>
                        <div class="liright">菜单二第3项第2列</div>
                    </li>
                    <li class="liClass">
                        <div class="lileft">菜单二第4项第1列</div>
                        <div class="liright">菜单二第4项第2列</div>
                    </li>
                    <li class="liClass">
                        <div class="lileft">菜单二第5项第1列</div>
                        <div class="liright">菜单二第5项第2列</div>
                    </li>
                </ul>
            </div>
        </div>
        <input id="menuOneTotal" type="hidden" name="menuOneTotal" value="20"/>
        <input id="menuTwoTotal" type="hidden" name="menuTwoTotal" value="15"/>
        <div style="height:15px;"></div>
        <footer>
            <a href="http://www.mozhenlong.com" style="text-decoration: none;">
                <div class="jump-btn">前往我的主页</div>
            </a>
        </footer>

    </body>

</html>

CSS

<style type="text/css">
            .menuClass{
                display: inline-block;
                width: 180px;
                height: 45px;
                color: #0092EF;
                text-align: center;
                vertical-align: middle;
                line-height: 45px;
            }
            .nav-active{
                border-bottom: 1px solid #999ec2;
            }
            li {
                list-style: none;
            }
            .lileft{
                float: left;
                padding-left: 10px;
            }
            .liright{
                float: right;
                padding-right: 10px;
            }
            .liClass{
                height: 38px;
                border-bottom: 0.01rem solid #d1d0d0;
                vertical-align: middle;
                line-height: 38px;
            }
            footer{
                bottom: 0;
                width: 100%;
                position: fixed;
                text-align: center;
            }
            .ulClass{
                padding: 0;
            }
            body{
                font-family: 微软雅黑;
                margin: 0;
            }
            .jump-btn{
                background-color: white;
                height: 30px;
                line-height: 30px;
                vertical-align: middle;
            }

        </style>

JQuery

<script type="text/javascript">
        var pageSize = 5;
        //tap 之间的切换
        function switchMenu(srcId) {
            pageSize = 0;
            $("#MenuOne").html("");
            $("#MenuTwo").html("");
            if (srcId == "spanMenuOne") {
                $("#spanMenuTwo").removeClass("nav-active");
                $("#spanMenuOne").addClass("nav-active");
                $("#MenuOne").css("display", "");
                $("#MenuTwo").css("display", "none");
                AppendHtml("MenuOne");
            } else if (srcId == "spanMenuTwo") {
                $("#spanMenuTwo").addClass("nav-active");
                $("#spanMenuOne").removeClass("nav-active");
                $("#MenuOne").css("display", "none");
                $("#MenuTwo").css("display", "");
                AppendHtml("MenuTwo");
            }
        }
        //获取隐藏域中的总数值
        function getTotal(num) {
            if (num == 1) {
                return parseInt($("#MenuOne").val());
            } else if (num == 2) {
                return parseInt($("#MenuTwo").val());
            }
        }
        function AppendHtml(id){
            var menuNum = "";
            if (id == "MenuOne") {
                menuNum = "一";
            } else if (id == "MenuOne") {
                menuNum = "二";
            }
            if (pageSize >= 30) {
                return;
            } else{
                if ($("#" + id).html() == "") {
                    $("#" + id).append('<ul class="ulClass"></ul>');
                } 
                for (let i=1;i<=5;i++) {
                    var strAppend = '<li class="liClass"><div class="lileft">菜单' + menuNum +'第'
                    var t = pageSize + i;
                    strAppend += t +'项第1列</div><div class="liright">菜单' + menuNum +'第' + t+'项第2列</div></li>';
                    $("#" + id + " ul:first").append(strAppend);
                }
                pageSize += 5;
            }
        }
         //触摸滑动事件
        var pageIndex = "0";
        var startY, y = 0;
        var isEnd = true;
        //获取刚触摸时的纵轴坐标   
        function touchSatrt(e) {
            var touch = e.touches[0];
            y = 0;
            startY = touch.pageY;                 
        }
        //获取滑动的距离
        function touchMove(e) {
            var touch = e.touches[0];
            y = touch.pageY - startY; 
        }
        //判断是否已达最后一页
        function IsLastPage(totalPage) {
            if (parseInt(pageIndex) >= parseInt(totalPage)) {
                return true;
            }
            return false;
        }
        //触摸滑动后手指离开屏幕  
        function touchEnd(e) { 
            if (y < 0) {
                if (e.currentTarget.id == "MenuOne") {
                    if (!IsLastPage(getTotal(2))) {
                        AppendHtml("MenuOne");
                    }
                }
                else if (e.currentTarget.id == "MenuTwo") {
                    if (!IsLastPage(getTotal(1))) {
                        AppendHtml("MenuTwo");
                    }
                }
            }
        }
        //注册事件
        document.getElementById("MenuOne").addEventListener('touchstart', touchSatrt, false);
        document.getElementById("MenuOne").addEventListener('touchmove', touchMove, false);
        document.getElementById("MenuOne").addEventListener('touchend', touchEnd, false);

        document.getElementById("MenuTwo").addEventListener('touchstart', touchSatrt, false);
        document.getElementById("MenuTwo").addEventListener('touchmove', touchMove, false);
        document.getElementById("MenuTwo").addEventListener('touchend', touchEnd, false);
        </script>