VUE-Element组件（六）InfiniteScroll 无限滚动

清疚 2022-09-06 01:22 198阅读 0赞

一、列表渲染中，有时候列表数据量比较大，一次性渲染页面会卡顿。如我有个users对象数组，这个users是动态添加的，支持删除操作。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70][]

1、一次性加载的写法：

<div class="user-col scoll-col">
       <div class="user-item" v-for="(user, index) in users" :key="index">
          {
       { user.userName + '(' + user.userAccount + ')' }}
          <a href="javascript:void(0);" @click="deleteAddUser(index)" class="delete- 
             icon">X</a>
        </div>
    </div>
    
    
    <style scoped lang="less">
      .user-col {
        .user-item {
          margin-left: 10px;
        }
        .delete-icon {
          float: right;
          margin-right: 20px;
        }
      }
      //限制高度滚动条
      .scoll-col {
        max-height: 300px;
        overflow-y: auto;
      }
    </style>

一次性加载，拖动右侧自定义的滚动条，拖动到最底部则展示最后一条数据。而滚动加载，拖动到最下面会触发加载事件。

2、换成滚动加载：

<div class="infinite-list-wrapper" style="overflow:auto">
       <template>
          <ul class="infinite-list" v-infinite-scroll="scrollLoadUser" style="overflow:auto;height:300px">
              <li v-for="i in scrollCount" class="infinite-list-item" :key="i" infinite-scroll- 
                  disabled="disabled">
                  <div v-if="users[i - 1]">
                    {
       { users[i - 1].userName + '(' + users[i - 1].userAccount + ')' }}
                     <a href="javascript:void(0);" @click="deleteAddUser(i - 1)" class="delete- 
                         icon">X</a>
                </div>
              </li>
           </ul>
           <p v-if="scrollUserLoading">加载中...</p>
           
        </template>
     </div>
    
    
    <script>
    data(){
      return{
        users:[],
        //滚动加载
        scrollCount: 0,
        scrollUserLoading: false
     }
    },
    
     computed: {
        scrollUserNoMore() {
          return this.scrollCount >= this.addUsers.length;
        },
        disabled() {
          return this.scrollUserLoading || this.scrollUserNoMore;
        }
      },
    
     methods:{
        scrollLoadUser() {
          //一次加载20条
          let increaseCount = 20;
          let addAllCount = this.addUsers.length;
          if (this.scrollCount + increaseCount > addAllCount) {
            this.scrollCount = addAllCount;
          } else {
            this.scrollCount += increaseCount;
          }
          console.info('加载数据:' + this.scrollCount);
        },
     },
    
    watch: {
        users: {
          handler: function(val) {
            if (val && val.length > 0) {
              this.scrollLoadUser();
            }
          }
        }
      }
    </script>

初始化的时候会调用scrollLoadUser方法，滚动条滚动到最下方也会调用scrollLoadUser。由于users是动态添加的，在监听users变化的时候再调用一次scrollLoadUser。在scrollLoadUser方法中，则根据users的长度判断是否需要加载。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dfdF95X3k_size_16_color_FFFFFF_t_70]: /images/20220829/7ed521ebe9af45f1b4a151802e2f402e.png