1. 程式人生 > >ScrollViewer滾動到底來觸發載入資料的Behavior

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的處理邏輯。比如:privatevoid LazyLoadingBehavior_OnReachingBottomEvent ()        {varvm LayoutRoot. DataContextas MainViewModel;if (vm != null)            {intcount dtgRoot. Items .Count ;for (int i = count i count + 30; i ++)                {vm .DataItems . Add(newDataItem
 ()                                     {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;    }

相關推薦

ScrollViewer滾動到底觸發載入資料Behavior

最近專案中遇到載入資料的效能問題, 原因是.net4.0的虛擬化支援不夠完成,有好多bug在4.5才修復。 我們只能利用大家通用的做法來延遲載入資料:每次載入固定少量的資料,當拖動到底後,繼續載入後續相同數量的資料。思路:監聽ScrollViewer的VerticalOffs

JavaScript滾動到底部觸發載入資料

滾動到底部觸發事件 $(window).on("resize scroll",function(){ var $currentWindow = $(window);             var windowHeight = $currentWindow.height()

jQuery實現區域性區域滾動滾動到底部自動載入資料的問題總結與實現方法

1 需求背景 在我們做管理系統,需要從後臺資料庫取出資料顯示到前臺時,可能我們的做法就是將資料全部取出然後利用jQuery動態新增到表格當中,但是當我們取出的量非常大時問題就出現了,我們會發現頁面載入的速度非常慢,這時我們就可利用分頁或者這種監聽滾動條來自動載入資料,這種技術也稱為“

jquery 滾動條分頁載入資料

廢話不多說  直接擼 1.引入兩個js檔案,必須jquery第一個 <script src="jquery.min.js"/> <script src="jquery.infinit

多級下拉列表預設觸發下拉事件載入資料

jQuery.get("./getProvinceList",{},function(data){ console.log(); var list = data.data.list; var html = "<option value='0

vue--使用滑鼠滾動載入資料

關於用滑鼠滾動到某個位置我們就去載入資料,這樣的場景與業務需求現在越來越常見,現在來分析下《vue.js 實戰》中作者的一個解決策略:             1. 設定一個標誌位用來判斷資料是否在載入中   &nbs

thinkphp+ajax 移動端實現滾動到底部載入資料(無重新整理動態載入資料技術的應用)

監聽滾動條的js檔案地址:http://ons.me/526.html 1、dropload.css檔案 .dropload-up,.dropload-down{     position: relative;     height: 0; &n

jquery獲取滾動條下拉值-下拉式載入資料

var docHeight = $(document).height(); // 獲取整個頁面的高度 //var winHeight = $(window).height(); // 獲取當前窗體的高度 ,用window獲取的值跟document獲取的值是相同的不能用 var

移動端滾動載入資料實現

模擬場景:移動端上劃到底,載入更多資料。 1、本例子基於jQuery實現。監聽滾動事件。 $(function(){ $(window).scroll(function(){ }) }) 2、獲取滾動條到文件頂部的距離,上圖scrollTop那段。原生JS可用document.documentElement

easyui datagrid 非同步載入資料滾動條有時會自動滾到最底部的問題

在使用easyui 的datagrid非同步載入資料時發現滾動條有時會自動滾到最底部。經測試發現,如果載入資料前沒有選中行則不會出現這個問題。這樣我們可以在重新非同步載入資料前取消選中行就可以避免這個問題。 //easyui datagrid 取消選中行 $("#dg").datagrid("clea

jupyter notebook中使用ImageFolder載入資料夾時把.ipynb_checkpoints資料夾忽略

from torchvision.datasets import ImageFolder dataset = ImageFolder('data/dogcat_2/') dataset.class_t

js滾動分頁載入資料

實現理念: 1.判斷滾動條到底部觸發載入函式 2.請求資料 3.追加資料 html: <div class="list_flex" id="listrow"> <a href="./index.php?i=3&c=entry&m=ewei_

滑鼠滾動到頁面底部自動載入資料--阻止多次請求

//滑鼠滾動到頁面最底部載入資料var documentHeight = [0];$(window).bind("scroll",function() {   if($(document).scrollTop() + $(window).height() > $

Ajax動態滾動載入資料

看新浪微博,人人網都有這樣的效果:滾動條滾動到最下面的時候,新的資料就被自動加載出來了,今天親自嘗試了一下這個效果的實現。 核心程式碼更新: $(window).scroll(function(){ // 當滾動到最底部以上n畫素時, 載入新內容

頁面滾動動態載入資料,頁面下拉自動載入內容

<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script ty

JS頁面滾動動態載入資料,頁面下拉自動載入內容

//<!-- 頁面滾動動態載入資料,頁面下拉自動載入內容 --> $(window).scroll(function(){ totalheight =parseFloat($(window).scrollTop())+ parseFl

jquery滾動載入資料

我們瀏覽有些網頁的時候,當拉動瀏覽器的滾動條時到頁底時,頁面會繼續自動載入更多內容供使用者瀏覽。這種技術我暫且稱它為滾屏載入技術,我們發現很多網站用到這種技術,例如新浪微博、QQ空間等。 jquery實現滾動載入資料的方式類似於 HTML 程式碼   複製 <!DOCTYPE=html

微信小程式自動滾動載入資料之坑

我的 scroll-view自動滾動,應該滾動到底部最後一個元素roll29, 但是滾動到roll21,其他的都被遮擋了。因為我是載入一天的歷史記錄,所以有可能一次性載入很多資料,這樣自動重新整理

[JS前端開發] js/jquery控制頁面動態載入資料 滑動滾動條自動載入事件

本人小菜鳥一隻,為了自我學習和交流PHP(jquery,linux,lamp,shell,javascript,伺服器)等一系列的知識,小菜鳥建立了一個群。希望光臨本部落格的人可以進來交流。尋求共同

手機端滾動分頁載入資料模型

說明:執行demo的時候請將瀏覽器模式調整到蘋果5 <!DOCTYPE html> <html lang="en"> <head> <meta