【背景】

很多时候在做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 实现列表触底加载的更多相关文章

  1. 微信小程序:上滑触底加载下一页

    给商品列表页面添加一个上滑触底加载下一页的效果,滚动条触底之后就发送一个请求,来加载下一页数据, 先在getGoodsList中获取总条数 由于总页数需要再另外的一个方法中使用,所以要把总页数变成一个 ...

  2. 一个简单的适用于Vue的下拉刷新,触底加载组件

    一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...

  3. js滚动事件实现滚动触底加载

    移动端触底加载时前端开发过程中常用功能,主要是通过三个值的大小来进行判断: 首先介绍jquery的写法,代码如下: $(window).scroll(function(){ var windowH=$ ...

  4. el-select实现下拉框触底加载更多

    当下拉框需要展示的数据有很多时,几千甚至上万条,一次性全部请求回来再按照特定格式比如 id-name 去处理数据的话,不论是从接口还是前端,这个性能都不是很好,会造成下拉框初次打开时响应很慢,影响用户 ...

  5. 微信小程序采坑之上拉触底加载更多和下拉刷新

    小程序中加载更多数据一般都是触底刷新 有自带的函数: onReachBottom: function (){} 但是在使用时触发完全没有反应,后来尝试给外层加了一个高度,解决问题 仔细想想也是,没有设 ...

  6. react native Expo完全基于ScrollView实现的下拉刷新和上拉触底加载

    我直接封装成了一个组件 props参数为 static propTypes = { style:PropTypes.object, // 样式 refreshing:PropTypes.bool.is ...

  7. apicloud触底加载的简单实现

    直接上干货 api.addEventListener({ name: 'scrolltobottom', extra: { threshold: 0 } }, function(ret, err) { ...

  8. [WP8.1UI控件编程]Windows Phone大数据量网络图片列表的异步加载和内存优化

    11.2.4 大数据量网络图片列表的异步加载和内存优化 虚拟化技术可以让Windows Phone上的大数据量列表不必担心会一次性加载所有的数据,保证了UI的流程性.对于虚拟化的技术,我们不仅仅只是依 ...

  9. BaseHttpListActivity,几行代码搞定Android Http列表请求、加载和缓存

    Android开发中,向服务器请求一个列表并显示是非常常见的需求,但实现起来比较麻烦,代码繁杂. 随着应用的更新迭代,这种需求越来越多,我渐渐发现了实现这种需求的代码的共同点. 于是我将Activit ...

随机推荐

  1. 介绍一点.NET反编译的知识

    反编译是我们理解.NET内部实现的一种良好的手段. 程序编译时 Test.exe是IL代码.我们可以通过一些工具,来查看这些IL代码. 一模一样? 理论上来说,一模一样的反编译是不存在的.原因有以下3 ...

  2. sublime text 2 中文乱码解决办法

    sublime text 2是一款非常优秀的跨平台文本及源代码编辑器,本人非常喜欢,但是不支持GB2312和GBK编码在某些时候比较麻烦.可以通过向sublime text 中添加编码类型转换包(比如 ...

  3. linux下alias命令详解

    功能说明:设置指令的别名. 语 法:alias[别名]=[指令名称] 形如: alias cp=“cp -i” : 补充说明:用户可利用alias,自定指令的别名.若仅输入alias,则可列出目前所有 ...

  4. 学习web前端开发感想

    1.学习一个技术,不是一看见源代码就是copy,而是仔细阅读后,找到自己想要的,并且自己写出来,自己理解了,下次遇到同样的问题,自己才能解决. 2.在电脑上学习的过程中,我总是先建立一个文本文档,这样 ...

  5. Java 连接MongoDB

    1.驱动 通过java连接MongoDB需要一个java版的驱动 下载地址:http://mongodb.github.io/mongo-java-driver/ 2.连接MongoDB 通过 com ...

  6. PHP面向对象之旅:static变量与方法

    static关键字声明一个属性或方法是和类相关的,而不是和类的某个特定的实例相关,因此,这类属性或方法也称为“类属性”或“类方法”. 如果访问控制权限允许,可不必创建该类对象而直接使用类名加两个冒号“ ...

  7. BT9034: 仅 IE 和 Opera 支持 HTMLFrameElement 和 HTMLIFrameElement 的 document 属性

    标准参考 根据 DOM-2 中的描述,HTMLFrameElement 和 HTMLIFrameElement 都没有 'document' 属性. 关于 HTMLFrameElement 对象的详细 ...

  8. python实现决策树

    1.决策树的简介 http://www.cnblogs.com/lufangtao/archive/2013/05/30/3103588.html 2.决策是实现的伪代码 “读入训练数据” “找出每个 ...

  9. mysql基本知识---20151127-2

    12.日期计算 YEAR( ).MONTH( )和DAYOFMONTH( ).CURDATE().RIGHT() 1>mysql> SELECT name, birth, CURDATE( ...

  10. 2.css选择器

    由第一节的语法结构可以看出css语言的核心思想就是:找到对象,然后对选定的对象进行属性赋值.其中,css中对象的选择,依靠的就是选择器.当掌握了选择器以后,就能够指哪打哪,弹无虚发了. css的选择器 ...