We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
https://github.com/antvis/G2/issues/new/choose
图例分页器会出现分页页码计算错误的情况,上翻会出现负数或0,下翻会在还未到尾页的时候点击不动。看了下g2的源码, // 展示优先级
li.forEach(function (l,index) { l.style.display = itemDisplay; curHeight = l.offsetTop l.offsetHeight; if (curHeight > legengWrapperHeight) { l.style.display = 'none'; } });
// 上翻 if (li[0].style.display === itemDisplay) return; // otherwise // 下翻 if (li[li.length - 1].style.display === itemDisplay) return; // otherwise 发现是在计算处理的时候计算方法错误,上翻跟下翻均是根据li标签的index来计算的,但是上面的渲染的过程中是根据高度按照优先级来进行展示的,这个过程中就破坏了原有的index
if (li[0].style.display === itemDisplay) return; // otherwise
if (li[li.length - 1].style.display === itemDisplay) return; // otherwise
可以在计算pages页数的时候存储换页临界的index,根据这个来做翻页边界条件,这个思路可以的话,我可以提pr,注释部分为原有逻辑
var li = itemListDom.childNodes; var curHeight = 0; // find the total page number var pages = 1; var blockLi = []; var pageIndex = []; // 存储分页临界项index for (var i = 0; i < li.length; i++) { li[i].style.display = itemDisplay; curHeight = li[i].offsetTop + li[i].offsetHeight; if (curHeight > legengWrapperHeight) { pages++; pageIndex.push(i); blockLi.forEach(function (bl) { bl.style.display = 'none'; }); blockLi = []; } blockLi.push(li[i]); } totalPageNumDom.innerText = '/' + pages; // initialize the page li.forEach(function (l) { l.style.display = itemDisplay; curHeight = l.offsetTop + l.offsetHeight; if (curHeight > legengWrapperHeight) { l.style.display = 'none'; } }); // 上翻事件 var currentPageIndex = 0; caretUpDom.addEventListener('click', function () { // 第一页直接返回 if( currentPageIndex === 0) return; currentPageIndex -= 1; var displayItemIndex = pageIndex[currentPageIndex]; var preDisplayItemIndex = pageIndex[currentPageIndex - 1] || 0; var nextDispalyItemIndex = pageIndex[currentPageIndex + 1] || li.length; // 点击之前的当前页不显示 for(var j = displayItemIndex; j < nextDispalyItemIndex; j++) { li[j].style.display = 'none'; } // 显示点击后的当前页 for(var i = preDisplayItemIndex; i < displayItemIndex; i++) { li[i].style.display = itemDisplay; } // it is the 1st page // if (li[0].style.display === itemDisplay) return; // otherwise // var firstDisplayItemIdx = -1; // li.forEach(function (l, i) { // if (l.style.display === itemDisplay) { // firstDisplayItemIdx = firstDisplayItemIdx === -1 ? i : firstDisplayItemIdx; // l.style.display = 'none'; // } // }); // for (var _i = firstDisplayItemIdx - 1; _i >= 0; _i--) { // li[_i].style.display = itemDisplay; // curHeight = li[firstDisplayItemIdx - 1].offsetTop + li[firstDisplayItemIdx - 1].offsetHeight; // li[_i].style.display = 'none'; // if (curHeight <= legengWrapperHeight) { // li[_i].style.display = itemDisplay; // } else break; // } // change the page number var currentPage = Number.parseInt(curPageNumDom.innerText, 10) - 1; if (currentPage === 1) { caretUpDom.style.fill = DISABLED_CARET_COLOR; } else { caretUpDom.style.fill = ENABLED_CARET_COLOR; } caretDownDom.style.fill = ENABLED_CARET_COLOR; curPageNumDom.innerText = currentPage; }); // 下翻事件 caretDownDom.addEventListener('click', function () { // 如果是最后一页直接返回 if( currentPageIndex === pageIndex.length) return; var displayItemIndex = pageIndex[currentPageIndex]; var preDisplayItemIndex = pageIndex[currentPageIndex-1] || 0; var nextDispalyItemIndex = pageIndex[currentPageIndex + 1] || li.length; // 点击之前的当前页不显示 for(var i = preDisplayItemIndex; i < displayItemIndex; i++) { li[i].style.display = 'none'; } // 显示点击后的当前页 for(var j = displayItemIndex; j < nextDispalyItemIndex; j++) { li[j].style.display = itemDisplay; } currentPageIndex += 1; // it is the last page // if (li[li.length - 1].style.display === itemDisplay) return; // otherwise // var lastDisplayItemIdx = -1; // li.forEach(function (l, i) { // if (l.style.display === itemDisplay) { // lastDisplayItemIdx = i; // l.style.display = 'none'; // } // }); // for (var _i2 = lastDisplayItemIdx + 1; _i2 < li.length; _i2++) { // li[_i2].style.display = itemDisplay; // curHeight = li[_i2].offsetTop + li[_i2].offsetHeight; // li[_i2].style.display = 'none'; // if (curHeight <= legengWrapperHeight) li[_i2].style.display = itemDisplay;else break; // } // change the page number var currentPage = Number.parseInt(curPageNumDom.innerText, 10) + 1; if (currentPage === pages) { caretDownDom.style.fill = DISABLED_CARET_COLOR; } else { caretDownDom.style.fill = ENABLED_CARET_COLOR; } caretUpDom.style.fill = ENABLED_CARET_COLOR; curPageNumDom.innerText = currentPage; }); this.set('slipDom', slipDom); } };
The text was updated successfully, but these errors were encountered:
@Hi-lone 看看 4.1.x 是否有同样的问题,建议升级~
Sorry, something went wrong.
没有后续了?应该没有复现了吧
No branches or pull requests
Reproduction link
https://github.com/antvis/G2/issues/new/choose
Steps to reproduce
图例分页器会出现分页页码计算错误的情况,上翻会出现负数或0,下翻会在还未到尾页的时候点击不动。看了下g2的源码,
// 展示优先级
// 上翻
if (li[0].style.display === itemDisplay) return; // otherwise
// 下翻
if (li[li.length - 1].style.display === itemDisplay) return; // otherwise
发现是在计算处理的时候计算方法错误,上翻跟下翻均是根据li标签的index来计算的,但是上面的渲染的过程中是根据高度按照优先级来进行展示的,这个过程中就破坏了原有的index
可以在计算pages页数的时候存储换页临界的index,根据这个来做翻页边界条件,这个思路可以的话,我可以提pr,注释部分为原有逻辑
The text was updated successfully, but these errors were encountered: