【背景】

很多时候在做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. Something wrong with FTK's index search results

    My friend she told me last week that FTK could not "see" keywords in a plain text files wh ...

  2. MVC开发Markdown编辑器(1)

    MVC markdown MVC开发Markdown编辑器(1) 前言 安装 解析 结束语 前言 想在近段时间通过mvc开发个人博客,编辑器希望是markdown风格的,这样写文字会很方便.首先先解决 ...

  3. echarts 各种细节问题

    1.最大值最小值异常 //如果数组中的数字是字符串的形式的话,echarts计算最大最小值不正确,故将String的数字转化成Number类型 //将包含字符串的数组转化为浮点数数组 function ...

  4. Java TCP异步数据接收

    之前一直采用.Net编写服务端程序,最近需要切换到Linux平台下,于是尝试采用Java编写数据服务器.TCP异步连接在C#中很容易实现,网上也有很多可供参考的代码.但Java异步TCP的参考资料较少 ...

  5. Sublime Text 快捷键

    ctrl+shift+t:重新打开最近关闭文件 快捷键 功能 ctrl+shift+n 打开新Sublime ctrl+shift+w 关闭Sublime,关闭所有打开文件 ctrl+shift+t ...

  6. php文件hash算法,秒传原理

    header('Content-type:text/html;Charset=UTF-8'); define('blockSize', 4*1024*1024); var_dump(fileHash( ...

  7. NodeManager起不来

    NodeManager无法启动,解除授权,重新授权! CDH需要注意的表: SELECT * FROM `ROLES` SELECT * FROM CONFIGS WHERE attr LIKE '% ...

  8. Thinkphp 获取当前url

    $_GET['_URL_'] 获取整个url,返回值是数组 $Think.MODULE_NAME 获取当前class的名称 $Think.ACTION_NAME 获取当前action的方法名称

  9. 直接拿来用!超实用的Java数组技巧攻略[转]

    来自csdn http://www.csdn.net/article/2013-09-16/2816947-methods-for-java-arrays 本文分享了关于Java数组最顶级的11大方法 ...

  10. jquery实现radio按纽全不选和checkbox全选的实例

    用jquery实现以下两个这个功能: 1.对所有单选按纽中radio全不选 单选按纽:<input type="radio" name="f1">A ...