ScrollViewer滚动到底来触发加载数据的Behavior

最近项目中遇到加载数据的性能问题, 原因是.net4.0的虚拟化支持不够完成,有好多bug在4.5才修复。 我们只能利用大家通用的做法来延迟加载数据:

每次加载固定少量的数据,当拖动到底后,继续加载后续相同数量的数据。

思路:

监听ScrollViewer的VerticalOffsetProperty,如果值达到允许滚动的高度ScrollableHeight,则发出event通知外部处理加载逻辑。

使用方法:

1.对于ItemsControl编辑控件模板,在其中的ScrollViewer中加入behavior。

<ScrollViewer x :Name="DG_ScrollViewer" Focusable="false">

<i: Interaction.Behaviors>

<local: ReachingBottomBehavior ReachingBottomEvent="LazyLoadingBehavior_OnReachingBottomEvent" />

</i: Interaction.Behaviors>

在blend中,比较简单,直接对控件右键,编辑模板/副本,进入ScrollViewer后,把这个behavior拖到ScrollViewer的元素下即可, 生成的代码就是上面的内容。

xmlns:i ="http://schemas.microsoft.com/expression/2010/interactivity"

2.实现上面ReachingBottomEvent的处理逻辑。比如:

private void LazyLoadingBehavior_OnReachingBottomEvent ()

{

var vm = LayoutRoot. DataContext as MainViewModel;

if (vm != null)

{

int count = dtgRoot. Items .Count ;

for (int i = count ; i < count + 30; i ++)

{

vm .DataItems . Add(

new DataItem ()

{

Item1 = i . ToString(),

Item2 = i . ToString() + i .ToString ()

});

}

}

}

代码如下:

public class ReachingBottomBehavior : Behavior< ScrollViewer>

{

public ReachingBottomBehavior ()

{

// Insert code required on object creation below this point.

}

protected override void OnAttached()

{

base.OnAttached ();

// Insert code that you would want run when the Behavior is attached to an object.

var dpd = DependencyPropertyDescriptor. FromProperty(ScrollViewer .VerticalOffsetProperty, AssociatedType);

dpd.AddValueChanged (

AssociatedObject,

(sender,

args) =>

{

RaiseReachingBottomEvent();

});

}

protected override void OnDetaching()

{

base.OnDetaching ();

// Insert code that you would want run when the Behavior is removed from an object.

}

private void RaiseReachingBottomEvent()

{

bool isReachingBottom = AssociatedObject. VerticalOffset >= AssociatedObject .ScrollableHeight;

if (isReachingBottom )

{

if (this .ReachingBottomEvent != null)

{

this.ReachingBottomEvent ();

}

}

}

public event Action ReachingBottomEvent;

}

时间: 2024-08-29 23:43:10

ScrollViewer滚动到底来触发加载数据的Behavior的相关文章

listview滚动到底部自动加载数据

在android中listvieww加载数据,有的是分批加载,比如每次加载20条,100条就要加载5次,如果一次性加载100条,listview加载就变的慢,如果是有图片的话,一时浪费流量,二是item中带图片会出现错位的问题,listview加载数据目前好多app做法 一:分批加载 滑动到底部自动更新 二:滑动到底部 手动的点击加载更多 三:下拉刷新+底部加载更多 今天就讲下listview滑动到底部自动更新 分析:监听listview的滑动事件,判断listview是否滑动到底部,然后去加载

[转]ListView滚动到底部自动加载数据

转自:http://blog.csdn.net/shineflowers/article/details/41744241 在Android中有很多时候会选择用ListView加载数据,有的是分批加载,比如每次加载20条,100条就要加载5次,如果一次性加载100条,ListView加载就会变慢,如果是有图片的话,一是浪费流量,二是item中带图片会出现错位的问题l,ListView加载数据目前好多App的做法 1. 分批加载,滑动到底部自动更新 2. 滑动到底部,手动的点击加载更多 3. 下拉

JS下拉加载数据

判断页面是否到底了,如果到底了,则加载新数据进来 自总结要点 1.拉到最底时,会请求数据,此时如果滚动未停止,那么会重复加载数据,此举浪费服务器时间 解决办法是,设置一个变量,在加载之前,将它置为真.那么在拉到最底时判断一下这个变量值再加载 在请求数据的方法里,回调 函数中成功时,再将变量值置为假.如果有分页值,那么还要将分页值加1.本页的DEMO的分页参数是放在隐藏域中的 判断依据 以下是网上抄的 首先理解三个dom元素,分别是:clientHeight.offsetHeight.scroll

AngularJS:实现页面滚动到底自动加载数据的功能

要实现这个功能,可以通过https://github.com/sroze/ngInfiniteScroll这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改为$(

使用jquery.more.js来实现滚动加载数据

html <body> <div id="more"> <div class="single_item"> <div class="date"></div> <div class="author"></div> <div class="title"></div> </div> <a

HTML5商城开发一 楼层滚动加载数据

对于楼层加载在以前只是个想法,从来没实现过,刚好项目中碰到,再此总结一下 场景:HTML5,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300) <div id="subCategoryScroll" style="overflow: hidden; overflow-y: scroll;"> <ul clas

vue2.0无限滚动加载数据插件

  做vue项目用到下拉滚动加载数据功能,由于选的UI库(element)没有这个组件,就用Vue-infinite-loading 这个插件代替,使用中遇到的一些问题及使用方法,总结作记录! 安装:npm install vue-infinite-loading –save 引入 ES6 import InfiniteLoading from 'vue-infinite-loading'; export default { components: { InfiniteLoading, }, }

asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据,小生不才,还望各位大侠指教,呵呵~ 下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类

滑轮滚动到页面底部ajax加载数据

滚动下拉到页面底部加载数据是很多瀑布流网站的做法,那来看看配合jsonp是如何实现的吧 当然本例子采用的是jquery库,后期会做成原生js.本例的数据调用的是锋利的jquery一书提供的一段json. 首先要先判断页面怎么样才是滚动到底部,也就是scrollTop+window的height是否大于document的height,jquery如下代码: $(window).scrollTop()+$(window).height()>=$(document).height(): 再给windo