fanruan
/
fineui
4
1
Fork 2
Code Issues 1 Pull Requests Releases Wiki Activity
Browse Source

virtuallist

es6
guy 7 years ago
parent
2ae5235b79
commit
546087ba62
5 changed files with 233 additions and 188 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 135
      bi/base.js
  2. 8
      demo/js/core/abstract/demo.virtual_list.js
  3. 135
      docs/base.js
  4. 8
      docs/demo.js
  5. 135
      src/base/list/virtuallist.js

135
bi/base.js
Unescape View File

@ -15476,6 +15476,10 @@ BI.VirtualList = BI.inherit(BI.Widget, {
init: function () {
this.renderedIndex = -1;
this.cache = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
}, 1000 / 60);
},
render: function () {
@ -15511,23 +15515,27 @@ BI.VirtualList = BI.inherit(BI.Widget, {
self._calculateBlocksToRender();
});
BI.ResizeDetector.addResizeListener(this, function () {
self._renderMoreIf();
self._calculateBlocksToRender();
});
},
_renderMoreIf: function () {
var o = this.options;
var self = this, o = this.options;
var height = this.element.height();
var minContentHeight = o.scrollTop + height + o.overscanHeight;
var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0,
cnt = this.renderedIndex + 1;
var lastHeight;
while ((lastHeight = this.container.element.height()) < minContentHeight && index < o.items.length) {
var getElementHeight = function () {
return self.container.element.height() + self.topBlank.element.height() + self.bottomBlank.element.height();
};
while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) {
var items = o.items.slice(index, index + o.blockSize);
this.container.addItems(items);
var addedHeight = this.container.element.height() - lastHeight;
var addedHeight = getElementHeight() - lastHeight;
this.cache[cnt] = {
index: index,
scrollTop: lastHeight,
height: addedHeight
};
this.tree.set(cnt, addedHeight);
@ -15540,66 +15548,69 @@ BI.VirtualList = BI.inherit(BI.Widget, {
_calculateBlocksToRender: function () {
var o = this.options;
this._renderMoreIf();
// var height = this.element.height();
// var minContentHeightFrom = o.scrollTop - o.overscanHeight;
// var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
// var start = this.tree.greatestLowerBound(minContentHeightFrom);
// var end = this.tree.leastUpperBound(minContentHeightTo);
// var summaryTopHeight = 0;
var height = this.element.height();
var minContentHeightFrom = o.scrollTop - o.overscanHeight;
var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
var start = this.tree.greatestLowerBound(minContentHeightFrom);
var end = this.tree.leastUpperBound(minContentHeightTo);
// this.topBlank.setHeight(0);
// this.bottomBlank.setHeight(0);
// var needDestroyed = [];
// for (var i = 0; i < start; i++) {
// var index = this.cache[i].index;
// summaryTopHeight += this.cache[i].height;
// if (!this.cache[i].destroyed) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// needDestroyed.push(this.container._children[j]);
// this.container._children[j] = null;
// }
// this.cache[i].destroyed = true;
// // this.topBlank.setHeight(summaryTopHeight);
// }
// }
// summaryTopHeight = 0;
// for (var i = end + 1; i <= this.renderedIndex; i++) {
// var index = this.cache[i].index;
// summaryTopHeight += this.cache[i].height;
// if (!this.cache[i].destroyed) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// needDestroyed.push(this.container._children[j]);
// this.container._children[j] = null;
// }
// this.cache[i].destroyed = true;
// // this.bottomBlank.setHeight(summaryTopHeight);
// }
// }
// var firstFragment = document.createDocumentFragment(), lastFragment = document.createDocumentFragment();
// var currentFragment = firstFragment;
// for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
// var index = this.cache[i].index;
// if (!this.cache[i].destroyed) {
// currentFragment = lastFragment;
// }
// if (this.cache[i].destroyed === true) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// var w = this.container._children[j] = BI.createWidget(BI.extend({
// root: true
// }, BI.stripEL(o.items[j])));
// currentFragment.appendChild(w.element[0]);
// }
// this.cache[i].destroyed = false;
// }
// }
// this.container.element.prepend(firstFragment);
// this.container.element.append(lastFragment);
// BI.each(needDestroyed, function (i, child) {
// child && child._destroy();
// });
var needDestroyed = [];
for (var i = 0; i < start; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
needDestroyed.push(this.container._children[j]);
this.container._children[j] = null;
}
this.cache[i].destroyed = true;
}
}
for (var i = end + 1; i <= this.renderedIndex; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
needDestroyed.push(this.container._children[j]);
this.container._children[j] = null;
}
this.cache[i].destroyed = true;
}
}
var firstFragment = document.createDocumentFragment(), lastFragment = document.createDocumentFragment();
var currentFragment = firstFragment;
for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
currentFragment = lastFragment;
}
if (this.cache[i].destroyed === true) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
var w = this.container._children[j] = BI.createWidget(BI.extend({
root: true
}, BI.stripEL(o.items[j])));
w.element.css("position", "relative");//vertical布局下position要改成relative
currentFragment.appendChild(w.element[0]);
}
this.cache[i].destroyed = false;
}
}
this._scrollLock = true;
this.container.element.prepend(firstFragment);
this.container.element.append(lastFragment);
this.topBlank.setHeight(this.cache[start < 0 ? 0 : start].scrollTop);
var lastCache = this.cache[Math.min(end, this.renderedIndex)];
this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - lastCache.scrollTop - lastCache.height);
BI.each(needDestroyed, function (i, child) {
child && child._destroy();
});
this._debounceRelease();
},
_populate: function () {
_populate: function (items) {
var o = this.options;
if (items && this.options.items !== items) {
this.options.items = items;
}
this.tree = BI.PrefixIntervalTree.empty(Math.ceil(o.items.length / o.blockSize));
this._calculateBlocksToRender();
this.element.scrollTop(o.scrollTop);
@ -15611,7 +15622,10 @@ BI.VirtualList = BI.inherit(BI.Widget, {
},
populate: function (items) {
if (items && this.options.items !== items) {
this.restore();
}
this._populate();
},
destroyed: function () {
@ -15619,6 +15633,7 @@ BI.VirtualList = BI.inherit(BI.Widget, {
}
});
BI.shortcut('bi.virtual_list', BI.VirtualList);
/**
* 分页控件
*

8
demo/js/core/abstract/demo.virtual_list.js
Unescape View File

@ -5,12 +5,12 @@ Demo.Func = BI.inherit(BI.Widget, {
render: function () {
return {
type: "bi.virtual_list",
items: BI.map(BI.makeArray(200, 0), function (i, item) {
return {
items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) {
return BI.extend({}, item, {
type: "bi.label",
height: 30,
text: i
};
text: (i + 1) + "." + item.text,
});
})
}
}

135
docs/base.js
Unescape View File

@ -15476,6 +15476,10 @@ BI.VirtualList = BI.inherit(BI.Widget, {
init: function () {
this.renderedIndex = -1;
this.cache = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
}, 1000 / 60);
},
render: function () {
@ -15511,23 +15515,27 @@ BI.VirtualList = BI.inherit(BI.Widget, {
self._calculateBlocksToRender();
});
BI.ResizeDetector.addResizeListener(this, function () {
self._renderMoreIf();
self._calculateBlocksToRender();
});
},
_renderMoreIf: function () {
var o = this.options;
var self = this, o = this.options;
var height = this.element.height();
var minContentHeight = o.scrollTop + height + o.overscanHeight;
var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0,
cnt = this.renderedIndex + 1;
var lastHeight;
while ((lastHeight = this.container.element.height()) < minContentHeight && index < o.items.length) {
var getElementHeight = function () {
return self.container.element.height() + self.topBlank.element.height() + self.bottomBlank.element.height();
};
while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) {
var items = o.items.slice(index, index + o.blockSize);
this.container.addItems(items);
var addedHeight = this.container.element.height() - lastHeight;
var addedHeight = getElementHeight() - lastHeight;
this.cache[cnt] = {
index: index,
scrollTop: lastHeight,
height: addedHeight
};
this.tree.set(cnt, addedHeight);
@ -15540,66 +15548,69 @@ BI.VirtualList = BI.inherit(BI.Widget, {
_calculateBlocksToRender: function () {
var o = this.options;
this._renderMoreIf();
// var height = this.element.height();
// var minContentHeightFrom = o.scrollTop - o.overscanHeight;
// var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
// var start = this.tree.greatestLowerBound(minContentHeightFrom);
// var end = this.tree.leastUpperBound(minContentHeightTo);
// var summaryTopHeight = 0;
var height = this.element.height();
var minContentHeightFrom = o.scrollTop - o.overscanHeight;
var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
var start = this.tree.greatestLowerBound(minContentHeightFrom);
var end = this.tree.leastUpperBound(minContentHeightTo);
// this.topBlank.setHeight(0);
// this.bottomBlank.setHeight(0);
// var needDestroyed = [];
// for (var i = 0; i < start; i++) {
// var index = this.cache[i].index;
// summaryTopHeight += this.cache[i].height;
// if (!this.cache[i].destroyed) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// needDestroyed.push(this.container._children[j]);
// this.container._children[j] = null;
// }
// this.cache[i].destroyed = true;
// // this.topBlank.setHeight(summaryTopHeight);
// }
// }
// summaryTopHeight = 0;
// for (var i = end + 1; i <= this.renderedIndex; i++) {
// var index = this.cache[i].index;
// summaryTopHeight += this.cache[i].height;
// if (!this.cache[i].destroyed) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// needDestroyed.push(this.container._children[j]);
// this.container._children[j] = null;
// }
// this.cache[i].destroyed = true;
// // this.bottomBlank.setHeight(summaryTopHeight);
// }
// }
// var firstFragment = document.createDocumentFragment(), lastFragment = document.createDocumentFragment();
// var currentFragment = firstFragment;
// for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
// var index = this.cache[i].index;
// if (!this.cache[i].destroyed) {
// currentFragment = lastFragment;
// }
// if (this.cache[i].destroyed === true) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// var w = this.container._children[j] = BI.createWidget(BI.extend({
// root: true
// }, BI.stripEL(o.items[j])));
// currentFragment.appendChild(w.element[0]);
// }
// this.cache[i].destroyed = false;
// }
// }
// this.container.element.prepend(firstFragment);
// this.container.element.append(lastFragment);
// BI.each(needDestroyed, function (i, child) {
// child && child._destroy();
// });
var needDestroyed = [];
for (var i = 0; i < start; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
needDestroyed.push(this.container._children[j]);
this.container._children[j] = null;
}
this.cache[i].destroyed = true;
}
}
for (var i = end + 1; i <= this.renderedIndex; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
needDestroyed.push(this.container._children[j]);
this.container._children[j] = null;
}
this.cache[i].destroyed = true;
}
}
var firstFragment = document.createDocumentFragment(), lastFragment = document.createDocumentFragment();
var currentFragment = firstFragment;
for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
currentFragment = lastFragment;
}
if (this.cache[i].destroyed === true) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
var w = this.container._children[j] = BI.createWidget(BI.extend({
root: true
}, BI.stripEL(o.items[j])));
w.element.css("position", "relative");//vertical布局下position要改成relative
currentFragment.appendChild(w.element[0]);
}
this.cache[i].destroyed = false;
}
}
this._scrollLock = true;
this.container.element.prepend(firstFragment);
this.container.element.append(lastFragment);
this.topBlank.setHeight(this.cache[start < 0 ? 0 : start].scrollTop);
var lastCache = this.cache[Math.min(end, this.renderedIndex)];
this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - lastCache.scrollTop - lastCache.height);
BI.each(needDestroyed, function (i, child) {
child && child._destroy();
});
this._debounceRelease();
},
_populate: function () {
_populate: function (items) {
var o = this.options;
if (items && this.options.items !== items) {
this.options.items = items;
}
this.tree = BI.PrefixIntervalTree.empty(Math.ceil(o.items.length / o.blockSize));
this._calculateBlocksToRender();
this.element.scrollTop(o.scrollTop);
@ -15611,7 +15622,10 @@ BI.VirtualList = BI.inherit(BI.Widget, {
},
populate: function (items) {
if (items && this.options.items !== items) {
this.restore();
}
this._populate();
},
destroyed: function () {
@ -15619,6 +15633,7 @@ BI.VirtualList = BI.inherit(BI.Widget, {
}
});
BI.shortcut('bi.virtual_list', BI.VirtualList);
/**
* 分页控件
*

8
docs/demo.js
Unescape View File

@ -3489,12 +3489,12 @@ BI.shortcut("demo.virtual_group_item", Demo.Item);Demo.Func = BI.inherit(BI.Widg
render: function () {
return {
type: "bi.virtual_list",
items: BI.map(BI.makeArray(200, 0), function (i, item) {
return {
items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) {
return BI.extend({}, item, {
type: "bi.label",
height: 30,
text: i
};
text: (i + 1) + "." + item.text,
});
})
}
}

135
src/base/list/virtuallist.js
Unescape View File

@ -19,6 +19,10 @@ BI.VirtualList = BI.inherit(BI.Widget, {
init: function () {
this.renderedIndex = -1;
this.cache = {};
this._scrollLock = false;
this._debounceRelease = BI.debounce(function () {
self._scrollLock = false;
}, 1000 / 60);
},
render: function () {
@ -54,23 +58,27 @@ BI.VirtualList = BI.inherit(BI.Widget, {
self._calculateBlocksToRender();
});
BI.ResizeDetector.addResizeListener(this, function () {
self._renderMoreIf();
self._calculateBlocksToRender();
});
},
_renderMoreIf: function () {
var o = this.options;
var self = this, o = this.options;
var height = this.element.height();
var minContentHeight = o.scrollTop + height + o.overscanHeight;
var index = (this.cache[this.renderedIndex] && (this.cache[this.renderedIndex].index + o.blockSize)) || 0,
cnt = this.renderedIndex + 1;
var lastHeight;
while ((lastHeight = this.container.element.height()) < minContentHeight && index < o.items.length) {
var getElementHeight = function () {
return self.container.element.height() + self.topBlank.element.height() + self.bottomBlank.element.height();
};
while ((lastHeight = getElementHeight()) < minContentHeight && index < o.items.length) {
var items = o.items.slice(index, index + o.blockSize);
this.container.addItems(items);
var addedHeight = this.container.element.height() - lastHeight;
var addedHeight = getElementHeight() - lastHeight;
this.cache[cnt] = {
index: index,
scrollTop: lastHeight,
height: addedHeight
};
this.tree.set(cnt, addedHeight);
@ -83,66 +91,69 @@ BI.VirtualList = BI.inherit(BI.Widget, {
_calculateBlocksToRender: function () {
var o = this.options;
this._renderMoreIf();
// var height = this.element.height();
// var minContentHeightFrom = o.scrollTop - o.overscanHeight;
// var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
// var start = this.tree.greatestLowerBound(minContentHeightFrom);
// var end = this.tree.leastUpperBound(minContentHeightTo);
// var summaryTopHeight = 0;
var height = this.element.height();
var minContentHeightFrom = o.scrollTop - o.overscanHeight;
var minContentHeightTo = o.scrollTop + height + o.overscanHeight;
var start = this.tree.greatestLowerBound(minContentHeightFrom);
var end = this.tree.leastUpperBound(minContentHeightTo);
// this.topBlank.setHeight(0);
// this.bottomBlank.setHeight(0);
// var needDestroyed = [];
// for (var i = 0; i < start; i++) {
// var index = this.cache[i].index;
// summaryTopHeight += this.cache[i].height;
// if (!this.cache[i].destroyed) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// needDestroyed.push(this.container._children[j]);
// this.container._children[j] = null;
// }
// this.cache[i].destroyed = true;
// // this.topBlank.setHeight(summaryTopHeight);
// }
// }
// summaryTopHeight = 0;
// for (var i = end + 1; i <= this.renderedIndex; i++) {
// var index = this.cache[i].index;
// summaryTopHeight += this.cache[i].height;
// if (!this.cache[i].destroyed) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// needDestroyed.push(this.container._children[j]);
// this.container._children[j] = null;
// }
// this.cache[i].destroyed = true;
// // this.bottomBlank.setHeight(summaryTopHeight);
// }
// }
// var firstFragment = document.createDocumentFragment(), lastFragment = document.createDocumentFragment();
// var currentFragment = firstFragment;
// for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
// var index = this.cache[i].index;
// if (!this.cache[i].destroyed) {
// currentFragment = lastFragment;
// }
// if (this.cache[i].destroyed === true) {
// for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
// var w = this.container._children[j] = BI.createWidget(BI.extend({
// root: true
// }, BI.stripEL(o.items[j])));
// currentFragment.appendChild(w.element[0]);
// }
// this.cache[i].destroyed = false;
// }
// }
// this.container.element.prepend(firstFragment);
// this.container.element.append(lastFragment);
// BI.each(needDestroyed, function (i, child) {
// child && child._destroy();
// });
var needDestroyed = [];
for (var i = 0; i < start; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
needDestroyed.push(this.container._children[j]);
this.container._children[j] = null;
}
this.cache[i].destroyed = true;
}
}
for (var i = end + 1; i <= this.renderedIndex; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
needDestroyed.push(this.container._children[j]);
this.container._children[j] = null;
}
this.cache[i].destroyed = true;
}
}
var firstFragment = document.createDocumentFragment(), lastFragment = document.createDocumentFragment();
var currentFragment = firstFragment;
for (var i = (start < 0 ? 0 : start); i <= end && i <= this.renderedIndex; i++) {
var index = this.cache[i].index;
if (!this.cache[i].destroyed) {
currentFragment = lastFragment;
}
if (this.cache[i].destroyed === true) {
for (var j = index; j < index + o.blockSize && j < o.items.length; j++) {
var w = this.container._children[j] = BI.createWidget(BI.extend({
root: true
}, BI.stripEL(o.items[j])));
w.element.css("position", "relative");//vertical布局下position要改成relative
currentFragment.appendChild(w.element[0]);
}
this.cache[i].destroyed = false;
}
}
this._scrollLock = true;
this.container.element.prepend(firstFragment);
this.container.element.append(lastFragment);
this.topBlank.setHeight(this.cache[start < 0 ? 0 : start].scrollTop);
var lastCache = this.cache[Math.min(end, this.renderedIndex)];
this.bottomBlank.setHeight(this.tree.sumTo(this.renderedIndex) - lastCache.scrollTop - lastCache.height);
BI.each(needDestroyed, function (i, child) {
child && child._destroy();
});
this._debounceRelease();
},
_populate: function () {
_populate: function (items) {
var o = this.options;
if (items && this.options.items !== items) {
this.options.items = items;
}
this.tree = BI.PrefixIntervalTree.empty(Math.ceil(o.items.length / o.blockSize));
this._calculateBlocksToRender();
this.element.scrollTop(o.scrollTop);
@ -154,7 +165,10 @@ BI.VirtualList = BI.inherit(BI.Widget, {
},
populate: function (items) {
if (items && this.options.items !== items) {
this.restore();
}
this._populate();
},
destroyed: function () {
@ -162,3 +176,4 @@ BI.VirtualList = BI.inherit(BI.Widget, {
}
});
BI.shortcut('bi.virtual_list', BI.VirtualList);

Write Preview
Loading…
Cancel
Save