g2 legend分页器翻页逻辑错误 #3244

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

https://github.com/antvis/G2/issues/new/choose

Steps to reproduce

图例分页器会出现分页页码计算错误的情况，上翻会出现负数或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

可以在计算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);
    }
  };

<!-- generated by antv-issue-helper. DO NOT REMOVE -->