滚动加载data长度改变时优化endIndex计算

This commit is contained in:
wanghaoo 2019-02-19 16:08:44 +08:00
parent 2ef7e05d90
commit 887f43fd47
5 changed files with 50 additions and 45 deletions

View File

@ -81,14 +81,11 @@ function bigData(Table) {
_this.currentIndex = 0; _this.currentIndex = 0;
_this.startIndex = _this.currentIndex; //数据开始位置 _this.startIndex = _this.currentIndex; //数据开始位置
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
if (_this.endIndex > dataLen) {
_this.endIndex = dataLen;
}
} }
if (nextProps.data !== props.data) { if (nextProps.data !== props.data) {
_this.computeCachedRowParentIndex(nextProps.data); _this.computeCachedRowParentIndex(nextProps.data);
if (nextProps.data.length > 0 && _this.endIndex < 1) { if (nextProps.data.length > 0) {
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex - this.loadBuffer + _this.loadCount; //数据结束位置
} }
} }
//如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex //如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex
@ -272,6 +269,15 @@ function bigData(Table) {
var endIndex = this.endIndex, var endIndex = this.endIndex,
startIndex = this.startIndex; startIndex = this.startIndex;
if (startIndex < 0) {
startIndex = 0;
}
if (endIndex < 0) {
endIndex = 0;
}
if (endIndex > data.length) {
endIndex = data.length;
}
var lazyLoad = { var lazyLoad = {
startIndex: startIndex, startIndex: startIndex,
startParentIndex: startIndex //为树状节点做准备 startParentIndex: startIndex //为树状节点做准备

58
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "1.6.39", "version": "1.6.40-beta.2",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",

View File

@ -62,16 +62,14 @@ export default function bigData(Table) {
if (nextProps.data !== props.data) { if (nextProps.data !== props.data) {
_this.computeCachedRowParentIndex(nextProps.data); _this.computeCachedRowParentIndex(nextProps.data);
if(nextProps.data.length>0){ if(nextProps.data.length>0){
_this.endIndex = _this.startIndex + _this.loadCount; //数据结束位置 _this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
} }
} }
//如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex //如果传currentIndex会判断该条数据是否在可视区域如果没有的话则重新计算startIndex和endIndex
if(currentIndex!==-1 && currentIndex !== this.currentIndex){ if(currentIndex!==-1 && currentIndex !== this.currentIndex){
_this.setStartAndEndIndex(currentIndex,dataLen); _this.setStartAndEndIndex(currentIndex,dataLen);
} }
if(_this.endIndex > dataLen){
_this.endIndex = dataLen;
}
} }
componentDidMount() { componentDidMount() {
@ -429,7 +427,16 @@ export default function bigData(Table) {
render() { render() {
const { data } = this.props; const { data } = this.props;
const { scrollTop } = this; const { scrollTop } = this;
const { endIndex, startIndex } = this; let { endIndex, startIndex } = this;
if(startIndex < 0){
startIndex = 0;
}
if(endIndex < 0 ){
endIndex = 0;
}
if(endIndex > data.length){
endIndex = data.length;
}
const lazyLoad = { const lazyLoad = {
startIndex: startIndex, startIndex: startIndex,
startParentIndex: startIndex //为树状节点做准备 startParentIndex: startIndex //为树状节点做准备