我如何在移動jquery lisview小部件中實現延遲加載? 任何人都可以給出一個例子使用json格式的靜態數據綁定到jQuery的移動listview小部件? 謝謝。jQuery mobile listviews懶惰加載
1
A
回答
5
有幾種方法,以下兩種方法很好用
JQM的方式,一個很好的教程。它可以檢測,當你滾動到列表視圖和負載更多項目的底部列出
http://jqmtricks.wordpress.com/2014/07/15/infinite-scrolling/
演示
http://jsfiddle.net/Palestinian/pAgbT/light/
另一種方法是使用Iscroll 5堵塞。同樣,你可以設置一個函數來檢測,當您滾動到列表的底部,並加載新的項目
演示我把整個Iscroll 5堵漏演示所以向下滾動////JQM STUFF查看實際代碼
某些JQM代碼(例如,觸發器創建)在JQM 1.4中折舊,因此需要對其進行一些修改,使其大於1.4才能工作。
var myScroll;
$(document).ready(function(){
myScroll = new IScroll('#wrapper',
{
scrollX: false,
scrollY: true
,click:true // open click event
,scrollbars: false
,useTransform: true
,useTransition: false
,probeType:3,
mouseWheel:true,
bindToWrapper: true
});
});
function initscroll() {
setTimeout(function() {
myScroll.refresh();
}, 1000);
}
output = '<li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li>';
$('#listview').html(output).listview().listview('refresh');
initscroll()
myScroll.on('scrollEnd', function() {
if (this.y == this.maxScrollY)
load_new_items();
});
function load_new_items() {
mysearchlist = $('<li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li>');
mysearchlist.appendTo("#listview").trigger('create');
$('#listview').listview().listview('refresh');
initscroll()
}
有使用jQuery上滾動的功能監視列表的高度,然後爲你滾動衡量你從列表的頂部滾動的像素多了一個途徑。當兩個匹配時,你可以運行一個函數來追加列表中的更多項目
相關問題
- 1. jQuery Mobile懶惰加載列表項
- 2. 懶惰加載不加載
- 3. Autofac懶惰加載
- 4. Android懶惰加載
- 5. 懶惰加載Ninject
- 6. GWT懶惰加載
- 7. Eclipselink懶惰加載
- 8. jQuery懶惰加載 - 顯示問題:無
- 9. 懶惰加載CSS與js
- 10. 學說懶惰加載
- 11. 動畫懶惰加載ArrayAdapter
- 12. Hibernate懶惰加載HQL
- 13. 用webpack懶惰加載angular2
- 14. 懶惰加載視圖
- 15. 在實體框架中加載懶惰集合太懶惰
- 16. 懶惰加載和懶惰評估有什麼區別?
- 17. 懶惰的圖像加載器
- 18. 懶惰在ASP.NET中加載圖像
- 19. 懶惰加載博客文章
- 20. 流沙插件和懶惰加載器
- 21. 加載懶惰後給予警報
- 22. ASP.NET持久緩存(「懶惰加載」式?)
- 23. jsTree v.3懶惰加載ajax調用
- 24. iOS 5 ARC懶惰圖像加載庫
- 25. 主義:懶惰加載屬性
- 26. 懶惰加載nhibernate一對一
- 27. MVC3懶惰模型綁定/加載
- 28. 懶惰加載不起作用
- 29. 懶惰加載批量數據集Keras
- 30. 懶惰的圖像加載瓦特/
謝謝..它幫助.. :) – daxeshS 2014-10-16 06:51:07