guy
8 years ago
16 changed files with 427 additions and 73 deletions
@ -0,0 +1,22 @@ |
|||||||
|
Demo.Func = BI.inherit(BI.Widget, { |
||||||
|
props: { |
||||||
|
baseCls: "demo-func" |
||||||
|
}, |
||||||
|
render: function () { |
||||||
|
return { |
||||||
|
type: "bi.list_view", |
||||||
|
el: { |
||||||
|
type: "bi.left" |
||||||
|
}, |
||||||
|
items: BI.map(Demo.CONSTANTS.ITEMS, function (i, item) { |
||||||
|
return BI.extend({}, item, { |
||||||
|
type: "bi.label", |
||||||
|
width: 200, |
||||||
|
height: 200, |
||||||
|
text: (i + 1) + "." + item.text, |
||||||
|
}); |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut("demo.list_view", Demo.Func); |
@ -0,0 +1,110 @@ |
|||||||
|
/** |
||||||
|
* 表示当前对象 |
||||||
|
* |
||||||
|
* Created by GUY on 2017/5/23. |
||||||
|
* @class BI.ListView |
||||||
|
* @extends BI.Widget |
||||||
|
*/ |
||||||
|
BI.ListView = BI.inherit(BI.Widget, { |
||||||
|
props: function () { |
||||||
|
return { |
||||||
|
baseCls: "bi-list-view", |
||||||
|
overscanHeight: 100, |
||||||
|
blockSize: 10, |
||||||
|
scrollTop: 0, |
||||||
|
el: {}, |
||||||
|
items: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
|
||||||
|
init: function () { |
||||||
|
var self = this; |
||||||
|
this.renderedIndex = -1; |
||||||
|
this.cache = {}; |
||||||
|
}, |
||||||
|
|
||||||
|
render: function () { |
||||||
|
var self = this, o = this.options; |
||||||
|
return { |
||||||
|
type: "bi.vertical", |
||||||
|
items: [BI.extend({ |
||||||
|
type: "bi.vertical", |
||||||
|
scrolly: false, |
||||||
|
ref: function () { |
||||||
|
self.container = this; |
||||||
|
} |
||||||
|
}, o.el)], |
||||||
|
element: this |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
mounted: function () { |
||||||
|
var self = this, o = this.options; |
||||||
|
this._populate(); |
||||||
|
this.element.scroll(function (e) { |
||||||
|
o.scrollTop = self.element.scrollTop(); |
||||||
|
self._calculateBlocksToRender(); |
||||||
|
}); |
||||||
|
BI.ResizeDetector.addResizeListener(this, function () { |
||||||
|
self._calculateBlocksToRender(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
_renderMoreIf: function () { |
||||||
|
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; |
||||||
|
var getElementHeight = function () { |
||||||
|
return self.container.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 = getElementHeight() - lastHeight; |
||||||
|
this.cache[cnt] = { |
||||||
|
index: index, |
||||||
|
scrollTop: lastHeight, |
||||||
|
height: addedHeight |
||||||
|
}; |
||||||
|
this.renderedIndex = cnt; |
||||||
|
cnt++; |
||||||
|
index += o.blockSize; |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
_calculateBlocksToRender: function () { |
||||||
|
var o = this.options; |
||||||
|
this._renderMoreIf(); |
||||||
|
}, |
||||||
|
|
||||||
|
_populate: function (items) { |
||||||
|
var o = this.options; |
||||||
|
if (items && this.options.items !== items) { |
||||||
|
this.options.items = items; |
||||||
|
} |
||||||
|
this._calculateBlocksToRender(); |
||||||
|
this.element.scrollTop(o.scrollTop); |
||||||
|
}, |
||||||
|
|
||||||
|
restore: function () { |
||||||
|
this.renderedIndex = -1; |
||||||
|
this.container.empty(); |
||||||
|
this.cache = {}; |
||||||
|
}, |
||||||
|
|
||||||
|
populate: function (items) { |
||||||
|
if (items && this.options.items !== items) { |
||||||
|
this.restore(); |
||||||
|
} |
||||||
|
this._populate(); |
||||||
|
}, |
||||||
|
|
||||||
|
destroyed: function () { |
||||||
|
this.restore(); |
||||||
|
} |
||||||
|
}); |
||||||
|
BI.shortcut('bi.list_view', BI.ListView); |
||||||
|
|
Loading…
Reference in new issue