无刷新滚屏加载数据

        一直比较懒，博客好几个月没更新了。

        最近做了一个项目，页面是瀑布流布局，本来是做成有分页的形式，觉的这种搭配有点不伦不类，呵呵，个人觉的，最后，那种分页形式，让我替换成了无刷新滚屏加载数据形式。哈哈，视觉效果，明显大增。

       我们浏览有些网页的时候，当拉动浏览器的滚动条时到页底时，页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术，必应图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。不废话了，直接介绍吧

       滚屏加载技术，是使用javascript监听滚动条的位置，没一次滚动条到达浏览器窗口底部时，触发一个ajax请求后台API，返回相应的数据，并将数据绑定且追加到页面的底部，从而实现动态加载数据，其实这就是一个典型的ajax应用。

页面数据的绑定形式：Index.cshtml

    我页面中默认显示10条数据，因此，我们先从数据库取开始的10条数据显示在页面。后面新加载的数据，我们也按每次10条的方式展示。

kendo tempalte 数据绑定方式：

 

<div class="model " id="test" style="display: none" data-template="healthList" data-bind="source:models.Results">
            </div>
<script type="text/x-kendo-template" id="healthList">
                <div class="grid list">
                                <div class="imgholder">
                                    <a href="/Jkb/DetailIndex/${ID}" target="_bank">
                                        <img class="lazy" src="/images/test/pixel.gif" data-original="@_imgHttpUrl${Image}" width="175" />
                                    </a>
                                </div>
                                <strong>${Title}</strong>
                                <p class="descp">${Description}</p>
                                <p style="color: rgb(153, 153, 153); margin-top: 10px; margin-bottom: 7px;">${FavoriteCount}
                                    收藏 ${CommentCount} 评论</p>
             </div>
  </script>

 

 Jquery ajax 获取数据格式

 

var i = 1; //设置当前页数
        $(window).scroll(function () {
            // 当滚动到最底部以上50像素时，加载新内容                                     
            var vlida = false;
            if ($(document).height() - $(this).scrollTop() - $(this).height() < 50 && !vlida) {
                $.ajax({
                    type: "GET",
                    url: "/api/JkbList?pageIndex=" + i + "&barClassId=" + barClassId,
                    dataType: "json",
                    success: function (msg) {
                        if (msg.Count > 0) {
                            var viewModel = {
                                models: kendo.observable(msg),
                                page: kendo.observable(msg)
                            };
                            var vm1 = $(".model");
                            kendo.bind(vm1, viewModel);
                            $('#container').append($("#test").html());//把加载的数据追加到页面的底部
                            //瀑布流布局，定义样式
                            $('#container').BlocksIt({
                                numOfCol: 5,
                                offsetX: 8,
                                offsetY: 8
                            });
                            $("img.lazy").lazyload();
                            i++;
                        } else {
                            $(".nodata").show().html("别滚动了，已经到底了。。。");
                            vlida = !vlida;
                            return false;
                        }
                        //jquery 限制字符数
                        $("#wrapper .grid.list .descp").each(function () {
                            var maxwith = 60;
                            if ($(this).text().length > maxwith) {
                                $(this).text($(this).text().substring(0, maxwith));
                                $(this).html($(this).html() + '...');
                            }
                        });                       
                    }
                });
            }
        });

 

 API的数据格式：

 

 数据是在存储过程里分页：

ALTER PROCEDURE [dbo].[UP_Web_healthBarWorkCommentGetAll] 
	@WorkID int=null,
	@TotalRecordCount INT OUTPUT,
	@PageIndex INT,
	@PageSize INT
AS
BEGIN
	
	SET NOCOUNT ON;
	IF @PageIndex<=0
SET @PageIndex=1
IF @PageSize<=0
SET @PageSize=6
    -- Insert statements for procedure here
    SELECT 
    WorkID,CommentDescription,CreateDateTime,
    UserID AS UserID,HeadImage,Name,Mobile,
    REPLACE(Phone,SUBSTRING(Phone,4,5),'***') AS Phone
     FROM        
	(SELECT hbw.WorkID,hbw.CommentDescription,hbw.CreateDateTime,
	us.ID AS UserID,us.HeadImage,us.Name,us.Mobile,
	REPLACE(us.Mobile,SUBSTRING(us.Mobile,4,5),'***') AS Phone,
	ROW_NUMBER()OVER (ORDER BY hbw.ID DESC) AS RowNumber
 FROM dbo.HealthBarWorksComment AS hbw
INNER JOIN dbo.Users AS us ON us.ID=hbw.UserID
where hbw.WorkID=@WorkID) AS b
WHERE RowNumber BETWEEN  CAST(((@PageIndex - 1)* @PageSize+1) AS VARCHAR) AND  CAST((@PageIndex * @PageSize) AS VARCHAR)--对数据进行分页
SET @TotalRecordCount=(SELECT COUNT(ID) FROM dbo.HealthBarWorksComment WHERE WorkID=@WorkID)

END

 好了，本文的介绍到此结束，记录一下，自己的行踪。