第一个：我用cube-ui的indexList组件做的遇到一个问题就是手机端真实测试的时候,滑动到最下面手一松只能看到倒数第二个

下面这是我的HTML和css

.singer {
  position: absolute;
  top: 90px;
  left: 0px;
  width: 100%;
  height: 100%;

  .cube-index-list >>> .cube-index-list-nav {
    background: $color-background !important;
  }

  .list >>> .cube-index-list-nav {
    background: $color-background-d;
    padding: 18px 0px;
    border-radius: 10px;

    .cube-index-list-nav-list li {
      padding: 1px;
      font-size: $font-size-medium;
      color: hsla(0, 0%, 100%, 0.5);
    }
  }

  .list >>> .cube-index-list-nav .cube-index-list-nav-list li.active {
    color: $color-theme;
  }

  .list >>> .cube-index-list-nav .cube-index-list-nav-list li:first-child {
    font-size: $font-size-small;
  }

  .list >>> .cube-scroll-wrapper .cube-scroll-content .cube-scroll-list-wrapper .cube-index-list-content {
    background: $color-background;

    .cube-index-list-group {
      .cube-index-list-anchor {
        line-height: 30px;
        padding: 0px 0px 0px 12px;
        background: $color-highlight-background;
      }

      ul {
        background: $color-background;

        .cube-index-list-item {
          padding: 0px 0px 15px 25px;

          .custom-item {
            display: flex;
            align-items: center;

            .avatar {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }

            .name {
              padding-left: 15px;
              font-size: $font-size-medium;
              color: $color-text-l;
            }
          }
        }
      }
    }
  }

  .list >>> .cube-index-list-fixed {
    line-height: 30px;
    padding: 0px 0px 0px 12px;
    background: $color-highlight-background;
  }
}

第二个问题：

怎么把热门这两个再页面渲染出来而左侧只渲染处热这个字，我看到cube-ui实例是可以做的，但是不知道他如何做的：