一直比较懒,博客好几个月没更新了。
最近做了一个项目,页面是瀑布流布局,本来是做成有分页的形式,觉的这种搭配有点不伦不类,呵呵,个人觉的,最后,那种分页形式,让我替换成了无刷新滚屏加载数据形式。哈哈,视觉效果,明显大增。
我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、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
好了,本文的介绍到此结束,记录一下,自己的行踪。
相关推荐
这种技术我暂且称它为jQuery+Ajax无刷新滚屏加载技术。我们发现图片搜索、新浪微博、QQ空间等将该技术应用得淋漓尽致。 若是想看该网页特效教程 http://www.sucaihuo.com/js/9.html,滚动条下拉到最后,还可以查看...
最后,将这些结构动态地添加到最初页面上创建的空容器中,从而实现了无刷新地动态加载数据。 页面上显示数据的样式由CSS进行定义。为了保证数据项的美观,可以设置每条数据的样式,包括外边距、内边距、边框、字体...
在IT领域,页面自动刷新和无限循环滚屏是两种常见的网页动态效果,它们可以用于实时数据更新、展示滚动信息或创建独特的用户体验。本篇将详细解释这两种技术,并提供基于jQuery的实现方法。 **一、页面自动刷新** ...
9. **AJAX异步加载**:为了提高页面加载速度,滚屏模板通常采用AJAX异步加载技术,只加载当前可见区域的内容,当用户滚动时再加载其他部分。 10. **Accessibility**:一个好的HTML5滚屏模板应该考虑无障碍访问性,...
滚屏加载更多数据,适合评论等页面 本例的数据库很简单,一看就明了 复制代码 代码如下: ”container”> <?php $query=mysql_query(“select * from content order by id desc limit 0,10”); while ($row=mysql_...
1. **创建用户界面**:在ASP.NET页面中,我们通常会使用`UpdatePanel`控件来实现无刷新的滚动效果。`UpdatePanel`是ASP.NET AJAX Control Toolkit的一部分,它允许我们在不重新加载整个页面的情况下更新部分内容。 ...
你可以使用MVVM架构,通过`LiveData`或`ViewModel`将数据绑定到`ViewPager`,使得数据更新时页面能够自动刷新。 7. **优化性能**: 由于广告可能包含大量的图像,为了提高性能,可以使用`Glide`或`Picasso`这样的库...
在Android开发中,实现“左右滑动切换屏幕,上下滑动滚屏”的功能是一项常见的需求,这涉及到Android的触摸事件处理、布局管理以及视图滚动技术。以下将详细阐述这一主题。 1. 触摸事件处理 Android系统通过...
6. **性能优化**:考虑到广告加载可能会消耗较多的网络资源和CPU,开发者需要优化加载过程,例如使用异步加载、缓存策略,以及在网络条件差时减少广告刷新频率。 7. **广告填充率与用户体验平衡**:广告的频率和...
开发者可以自定义一个可重用的Footer View,当用户滚动到列表底部时,Footer View会显示“加载更多”或者“上拉刷新”的提示,并触发后台数据的加载。一旦数据加载完成,新的内容会被添加到列表中,Footer View的...
通过C#编程,开发者可以方便地添加自定义的事件监听和交互逻辑,实现诸如下拉刷新、上拉加载更多等功能。同时,该插件也兼容Unity的动画系统,可以轻松创建丰富的过渡效果,提升用户界面的视觉体验。 在集成...
这种逻辑通常包括上拉加载更多和下拉刷新两种操作。 - **上拉加载更多**:根据当前页面中发布时间最小的文章作为基准,加载后续的文章。 - **下拉刷新**:根据当前页面中发布时间最大的文章作为基准,加载最新的...
允许接收区在接收到的数据后添加回车字符(CRLF),便于观察数据。 16).可将Terminal模式下接收到的数据按照十六进制文本方式导出到文件或剪贴板。 17).允许保存程序环境变量。 18).定义热键,方便操作。 19).国际版,...
在本文中,我们将深入探讨`richtextBox`的使用,包括文字移动、自动滚屏、刷新以及可能出现的问题。 1. **richtextBox的文字移动** richtextBox中的文本可以通过编程方式进行移动。例如,可以使用`SelectionStart`...
为List的项编辑器添加格式化和验证数据 5.10节.跟踪TileList中所有被选中的子节点 5.11节.使用和显示项渲染器的NULL项 5.12节.为List创建右键菜单 5.13节.自定义List被选中项的外观 第六章. DataGrid和高级DataGrid...
- **ST_UNDERLINE**:为标题添加下划线。 - **ST_ICONTEXT**:文本为图像形式。 - **ST_ASCII**:文本为单字节编码。 #### 六、IStatic的局限性 尽管IStatic接口提供了丰富的功能,但它也有一些局限性,例如: - *...
[2009.1.1] Ver 3.2.26 ...申请了签名证书(在大多数NOKIA、SE手机上有效),请通过jad安装,没有数据线的请用手机访问http://www.ismyway.com/anyview.asp在线安装进行安装(请把读取用户数据/写入用户数据改为从不...