scrolllistview_学习笔记
2015-08-20 15:15
411 查看
ScrollListView(JS第三方库) 学习笔记
github地址 https://github.com/ryanseddon/ScrollListViewtpl.js (JS的模板引擎)
就是帮我们把带有JavaScript代码的伪html语句翻译为html的东西(function(){ })();
当一个匿名函数被括起来,然后再在后面加一个括号,这个匿名函数就能立即运行起来!
模板的语法
用正常的方式书写html用<% %>嵌套JavaScript语句
用<%= %>嵌套JavaScript 变量值
字符串转换
想得到预期html字符串,我们必须设法让模板内部的javascript变量置换、javaScript语句执行,也就是把JavaScript代码剥离出来执行,把其它html语句拼接为一个字符串把<%=xxx%> 替换为 ‘);p.push(xxx);p.push(‘
html=html.replace(/<%=(.*?)%>/g,"');p.push(xxx);p.push('");
把<%替换为 ‘);
html=html.replace(/<%/g,"');");
把%> 替换为 p.push(‘
html=html.replace(/%>/g,"p.push('");
scrollViewList.js
onscroll:function onScroll(){}
滚动方向通过比较滚动头部位置的变化onScroll: function onScroll() { scrollTop = body.scrollTop; this.direction = scrollTop - lastScrollTop; this.checkCells(); }
得到可用的cell,取滚出屏幕后的cell除以cell的总和获得的模
getCurrentCell: function getCurrentCell(count) { return this.cells[count % this.cells.length]; }
当我们能看到的最上面cell滚动出屏幕的时候进行的操作
this.cellsOutOfViewportCount++; this.cellIndex = this.cellsOutOfViewportCount; this.elementStyle.paddingTop = parseInt(this.elementStyle.paddingTop || 0, 10) + this.CELLHEIGHT + 'px'; this.currentCell.style[orderProp] = this.cellIndex; this.renderCell(this.currentCell, this.cellIndex-1);
example.js (如何使用)
使用方法 初始化
var ScrollListView = require('ScrollListView'); var scrollListView = new ScrollListView({ element: document.querySelector('.list'), data: [... array of objects to render], cellHeight: 150, renderFn: render, renderCellFn: renderCellFn });
First Header | Second Header |
---|---|
element | The element that the re-usable cells will live inside. You don’t add children to this the renderFntakes care of that. |
data | The array of data the list will read from work scroll offset and heights |
cellHeight | The abslute height in px that the cell will be. |
renderFn | This function gets called on initialisation to render the initial list. |
renderCellFn | When a cell is determined to be far enough out of the viewport this will be called with the element you can safely overwrite with the new data and the index in your data array passed in earlier. |
给予数据
function render(count) { var cellsFrag = document.createDocumentFragment(); for(var i = 0; i < count; i++) { var cell = document.createElement('li'), tweet = this.data[i]; cell.className = 'scrolllist__cell gpuarise'; cell.innerHTML = tmpl('tweet_tpl', tweet); cell.style.order = i+1; cellsFrag.appendChild(cell); } listContainer.appendChild(cellsFrag); listContainer.style.minHeight = this.data.length * this.CELLHEIGHT + 'px'; }
Cell循环利用赋值
//tweet_tpl是id function renderCell(cell, index) { cell.innerHTML = tmpl('tweet_tpl', this.data[index]); }
相关文章推荐
- 线程与进程的关系
- SignalR系列续集[系列6:使用自己的连接ID]
- BootStrap图标
- ie浏览器用js读取excel数据
- android 应用程序窗口小部件
- 详解嵌套ListView、ScrollView布局显示不全的问题
- (题解)(Splay)NOI2004郁闷的出纳员
- iOS开发 自定义一个全屏的蒙板(导航栏也能遮挡住)
- [leetcode] Regular Expression Matching
- Python 使用正则表达式 - 2
- 获取ios系统的进程列表(pid, names, paid, status)
- iOS开发——多线程篇——NSOperation(基于GCD多线程编程),下载图片并合成新图片
- 编写高质量代码改善C#程序的157个建议——建议95:避免在构造方法中调用虚成员
- Gamebryo 游戏引擎分析(一)整体设计
- haproxy
- Python3字符串学习教程
- 动态数组封装实现向量类
- TCP与UDP的区别
- object-c语言的nonatomic,assign,copy,retain的区别
- jQuery的deferred对象详解