Vue加element UI实现页面滚动无限加载

最新推荐文章于 2024-07-17 08:44:51 发布

licong_wood

最新推荐文章于 2024-07-17 08:44:51 发布

阅读量5.9k

点赞数 3

分类专栏： vue 文章标签： html javascript vue

本文链接：https://blog.csdn.net/licong1994/article/details/103833246

版权

本文介绍了如何使用Vue.js结合Element UI组件库来实现页面的无限滚动加载功能，包括页面基本布局设置、数据加载框的应用以及CSS样式的调整，最终达到在用户滚动到底部时自动加载更多数据的效果。

摘要由CSDN通过智能技术生成

	最近完成一个手机端的项目，项目需要页面加载时采用页面混动到底部加载页面数据。
	于是各种百度加看element UI 完成了一个小demo废话不多说直接上实现的代码。

页面布局数据加载框

<template>
   <!--无限加载-->
          <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">
                <img v-bind:src="i.doperationUrl" alt="图片加载失败" style="width: 175px;height: 118px">
              </li>
            </ul>
            <el-row style="height: 60px" v-if="loading"
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element<