Windows Phone 8 实现列表触底加载
【背景】
很多时候在做WP开发的过程中会遇到数据需要分页获取,根据微软官方的推荐方式,建议实现为Market中类似的体验,即滑动到列表的底部的时候加载更多的数据。
这一需求在早起WP7.1时代实现起来是很费劲的,需要借助WP Toolkit 中的LongListSelector,而自从LLS被微软扶正之后这一需求的实现有了更官方的方法。
【实现思路】
LLS传承了Listbox UI虚拟化的特性,所谓UI虚拟化即列表数据源中的数据不会一次性根据ItemTemplete将所有数据UI化,而是随着列表的滑动,随时将数据UI化,或者将UI化的数据释放掉。举例说明下更直观:
比如,LLS数据源中有1W条User类型的数据,记录用户信息。LLS负责展示这1W条数据。假设一屏能显示10条。那么UI虚拟化的工作就是:
1、将30条(举例的数据)User根据ItemTemplete绘制出对应的30个UI控件
2、向下滑动看到第20条数据的时候,从数据源中拿出20条绘制UI控件,并将前20条的绘制出来的控件释放掉。
3、向下滑动看到第40条数据的时候,再从数据源中拿出20条绘制UI控件,并将前20条绘制出来的控件释放掉。
4、往上滑动重新回到第20条数据的时候,反向再进行一次绘制和释放
以上UI虚拟化的概念了解后我们标题中的需求就很好实现了。
LLS定义了OnItemRealized事件,其作用简单说:当LLS根据ItemTemplete绘制UI控件时会触发此事件,通知用户当前绘制的是哪一个数据。
【具体代码分析】
根据这个定义我们实现的代码如下:

解释:
1、Offset 为距离数据源中最后一项的偏移量
2、IsLoading为依赖属性,标识当前正在加载数据
3、当OnItemRealized事件触发时,判断当前Realized的Item是否为数据源的倒数第二项,如果是,则认为需要加载新的数据,触发DataRequest事件
如此一个简单通用的"无尽列表"便实现了。
参考:
http://msdn.microsoft.com/library/windowsphone/develop/microsoft.phone.controls.longlistselector.itemrealized(v=vs.105).aspx
http://code.msdn.microsoft.com/wpapps/TwitterSearch-Windows-b7fc4e5e
完整代码见:
https://gist.github.com/tianhonghui/6999984
关于WP的交流欢迎加入QQ群:182659848
Windows Phone 8 实现列表触底加载的更多相关文章
- 微信小程序:上滑触底加载下一页
给商品列表页面添加一个上滑触底加载下一页的效果,滚动条触底之后就发送一个请求,来加载下一页数据, 先在getGoodsList中获取总条数 由于总页数需要再另外的一个方法中使用,所以要把总页数变成一个 ...
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
- js滚动事件实现滚动触底加载
移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...
- el-select实现下拉框触底加载更多
当下拉框需要展示的数据有很多时,几千甚至上万条,一次性全部请求回来再按照特定格式比如 id-name 去处理数据的话,不论是从接口还是前端,这个性能都不是很好,会造成下拉框初次打开时响应很慢,影响用户 ...
- 微信小程序采坑之上拉触底加载更多和下拉刷新
小程序中加载更多数据一般都是触底刷新 有自带的函数: onReachBottom: function (){} 但是在使用时触发完全没有反应,后来尝试给外层加了一个高度,解决问题 仔细想想也是,没有设 ...
- react native Expo完全基于ScrollView实现的下拉刷新和上拉触底加载
我直接封装成了一个组件 props参数为 static propTypes = { style:PropTypes.object, // 样式 refreshing:PropTypes.bool.is ...
- apicloud触底加载的简单实现
直接上干货 api.addEventListener({ name: 'scrolltobottom', extra: { threshold: 0 } }, function(ret, err) { ...
- [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化
11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依 ...
- BaseHttpListActivity,几行代码搞定Android Http列表请求、加载和缓存
Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...
随机推荐
- linux 下 jdk tar.gz 包安装方法
JDK安装 tar.gz为解压后就可使用的版本,这里我们将jdk-7u3-linux-i586.tar.gz解压到/usr/local/下. 1.解压 解压到当前目录:$ tar -zxvf /opt ...
- Android开发教程app下载无法成功创建问题
本文明来给各位同学介绍一下关于cordova cteate app 时下载失败无法成功创建的解决方法,有碰到此问题的同学可进入参考. 使用如下语句创建一个cordova应用: 代码如下 cordova ...
- CentOS学习笔记--文件权限概念
Linux 文件权限概念 当你的屏幕出现了『Permission deny』的时候,不要担心,『肯定是权限设定错误』啦!(以下节选自 鸟哥的 Linux 私房菜 第六章.Linux 的文件权限与目录配 ...
- POJ C++程序设计 编程题#3 编程作业—文件操作与模板
编程题#3: 整数的输出格式 来源: POJ(Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 1000kB 描述 利 ...
- SQLServer中用户 'sa' 登录失败解决办法
今天下午,很奇怪的网站突然就打不开了,报错如下: “/”应用程序中的服务器错误. 用户 'sa' 登录失败. 说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误 ...
- c#中判断对象为空的几种方式(字符串等)
(1)先了解几个与空类型相关的关键字和对象 Null : 关键字表示不引用任何对象的空引用,它是所有引用类型变量的默认值,在2.0版本之前也就只有引用变量类型可以为null,如(string a=n ...
- Silverlight中动画的性能浅析
Silverlight中提供了StoryBoard实现动画,可是StoryBoard的性能实在不敢恭维,特别是动画很大的时候,计算机的CPU和内存的狂增,如此一来性能实在太差,在默认的动画效果中动画实 ...
- Asp.net从文件夹中读取图片,随机背景图
第一步:配置文件web.config里添加 <system.web><connectionStrings> <!--name 是自定义的,connectionString ...
- linux中的虚拟化网络模型及各种模型实现
第一种隔离模型: Guest1和Guest2都为虚拟机. 首先要了解在linux中的虚拟机的网卡都包含前半段和后半段,前半段在虚拟机上,后半段在宿主机上,这里以centos6为例,上图 eth0为Gu ...
- 2013-10-25笔记,css: mini-width, 标准居中,样式中*号使用,背景图像位置定位
mini-width:设置元素的最小宽度.該屬性值會對元素的寬度設置一個最小限制.因此,元素可以比制定值寬,但不能比制定值窄.不允許指定負值. 完美的居中佈局: body{text-align: ce ...