scrolllistview_学习笔记

ScrollListView(JS第三方库) 学习笔记

github地址 https://github.com/ryanseddon/ScrollListView

tpl.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 renderFn takes 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]);
}