elementUI InfiniteScroll 无限滚动 一次加载到底不受禁用限制问题解决

解决方法: 删除官方样例中的style="overflow:auto"


ElementUI的官方样例

  <div class="infinite-list-wrapper" style="overflow:auto">
    <ul
      class="list"
      v-infinite-scroll="load"
      infinite-scroll-disabled="disabled">
      <li v-for="i in count" class="list-item">{
    { i }}li>
    ul>
    <p v-if="loading">加载中...p>
    <p v-if="noMore">没有更多了p>
  div>

cv到代码里边,加载页面时出现不受控制,一直加载出所有。
elementUI InfiniteScroll 无限滚动 一次加载到底不受禁用限制问题解决_第1张图片
打开度娘输入问题,问题没解决还衍生出新问题!
外层

或者
    里加高度,能解决无限加载,但限制高度会导致滚动区域撑不满页面。
    elementUI InfiniteScroll 无限滚动 一次加载到底不受禁用限制问题解决_第2张图片
    瞎搞一通甚至出现了两个滚动条 =。=!
    elementUI InfiniteScroll 无限滚动 一次加载到底不受禁用限制问题解决_第3张图片
    百般尝试后删除了官方样例中的style="overflow:auto",刷新页面,问题解决!

        <div class="infinite-list-wrapper">
          <ul
            class="infinite-list"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled"
            infinite-scroll-distance="10"
          >
            <li v-for="i in count" :key="i" class="infinite-list-item">{
        { i }}li>
          ul>
          <p v-if="loading">加载中...p>
          <p v-if="noMore">没有更多了p>
        div>
    

    elementUI InfiniteScroll 无限滚动 一次加载到底不受禁用限制问题解决_第4张图片

你可能感兴趣的:(vue,elementui,html,css)