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

来源：互联网发布：权健集团产业矩阵编辑：程序博客网时间：2024/05/09 01:44

两个菜单页面组成的手机页面滑动加载更多，触摸上滑可以加载更多记录，最多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>

阅读全文

1 0