设为首页 | 加入收藏

网站建设报价咨询,网站建设A套餐 网站建设报价咨询,网站建设B套餐 网站建设报价咨询,网站建设C套餐 网站建设报价咨询
手机网站制作
网络整合营销外包,长沙网站建设
您目前的位置:森达网络 >>手机网站制作
手机网站制作

长沙做网站公司开发手机网站jQuery滚动自动加载数据

本文来源: 手机网站分页      本文作者:长沙手机网站制作      发布时间:2017-01-14

长沙做网站公司为了更好的迎合手机用户的体验,很多用户在浏览大数据量页面时都需要用到滚动页面自动加载数据展示,以往的电脑端分页主要是靠分页控件以及点击事件。

现在长沙手机网站制作公司将以下实用的手机页面滚动加载数据代码分享,仅供参考,具体使用看自己项目需求修改。

<!DOCTYPE html>
<html>
<head>
//引用jQuery类库
<script src="/scripts/hQuery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    //设置每页展示条数
     var count = 10;
	 //设置页码
     var start = 0;
	 
	 
     $(document).ready(function () {
	  //第一步加载初始数据
         Getdata();
		 
		 //第一种,点击下一页加载页面
         $("#nodata").click(function () {
             start = start + 10;
             Getdata();
         });
		 
		 //第二种,鼠标滚到底部自动加载页面
        var winH = $(window).height(); //页面可视区域高度 
       $(window).scroll(function () {
         var pageH = $(document.body).height(); //页面总高度
          var scrollT = $(window).scrollTop(); //滚动条top 浏览器的高度
         var aa = (pageH - winH - scrollT) / winH;
             if (aa < 0.18) {
                 start = start + 10;
                 Getdata();
             }
             else {
                $("#nodata").show().html("正在加载..........");
            }
         });
     });
     function Getdata() {
         hbmobi.utils.loading();
         myPage.isLoading = true;
         $("#nodata").show().html("下一页");
         $.ajax({
             type: "get",
             url: "/Event/getdata/a/" + start + "_" + count,
             success: function (o, b) {
                 var data = o.Data;
                 if (data != null) {
                     var html = "";
                     if (data.length > 0) {
                         for (var i = 0; i < data.length; i++) {
                             html += " <a href=\"/Event/Coupon/a/" + data[i].Id + "\"><article link=\"\"><div class=\"airline cf\">";
                             html += " <p class=\"city cf\"><span>" + data[i].FromCityName + "</span><em class=\"arrow_dc\"></em><span>" + data[i].ToCityName + "</span></p>";
                             html += " <p class=\"date\">" + ChangeDateFormat(data[i].TripDate).substring(5, 10) + "</p> <p class=\"discount\">" + discount(data[i].discount) + " 折</p>";
                             html += "<p class=\"price cf\"><em>¥</em><span>" + data[i].Prices + "</span></p>";
                             html += "<p class=\"h_fx\" radata=\"\"  pkgdata=\"\" style=\"border: 0px; background-color: rgb(255, 255, 255);\"></p></div> </article> </a>";
                         }
                         $("#flist12655").append(html);
                         myPage.isLoading = false;
                         hbmobi.utils.endLoading();
                     }
                     else {
                         myPage.isLoading = false;
                         hbmobi.utils.endLoading();
                         $("#nodata").show().html("没有数据了");
                     }
                 }
                 else {
                     myPage.isLoading = false;
                     hbmobi.utils.endLoading();
                     $("#nodata").show().html("没有数据了");
                 }
             }
         });

     }
     function discount(No) {
         return parseFloat(No) * 10;
     }

	 //日期格式转换
     function ChangeDateFormat(cellval) {
         try {
             var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
             var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
             var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
             return date.getFullYear() + "-" + month + "-" + currentDate;
         } catch (e) {
             return "";
         }
     }
 </script>   
</head>
<body>
<div id="main">
            <div class="ad_image">
                <img src="/Themes/Default/images/search_icon.jpg">
            </div>  
            <firsttabrepeater block="">       
            <div class="airline_box cf" id="ft12654">             
                <tabproductrepeater block="">
                <div id="display" style="">
                <div id="flist12655" class="flight_list cf"> 
                </div>  </div> 
                </tabproductrepeater>
            </div> 
             <div id="nodata" class="nodata"> </div>
            </firsttabrepeater>        
        </div>
</body>
</html>

相关功能解析
[JavaScript] 纯文本查看 复制代码
    $(window).scroll(function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {

      //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作
 
        }
    });
解析:

判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。(兼容不同的浏览器)

以上代码由长沙做网站公司整理,转载请注明出处www.sendawangluo.com

版权所有:长沙森达网络工作室2011-2016 All Rights Reserved 地址:长沙市岳麓区中电软件园总部大楼 网站备案号:湘ICP备11005944号