开发小结-elementui无限滚动组件踩坑使用

最新推荐文章于 2024-08-28 13:46:03 发布
最新推荐文章于 2024-08-28 13:46:03 发布
阅读量470 收藏 1
点赞数
文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eqizhihui/article/details/132800779
版权

前提需求：下滑（滑动到底部）刷新列表数据，每下滑一次增加10条数据，初次进入不需要加载

踩坑过程：使用了elementUI中的无限滚动组件，根据其文档中的禁用加载例子修改代码

出现了几个问题

  1. 一进入页面就加载，且没有下划的情况下也在加载，直至达到禁用加载的数据
  2. 加载中等提示样式不符

针对第一个问题，解决方法是

  1. 设置infinite-scroll-immediate为false，设置了此属性后需要注意需要数据内容至少超出一点盒子（通俗讲就是要有滚动条）
  2. 给v-for所在元素的父元素设置高度，且高度最好是有单位的高度，比如px、rem、vh，而不能是%

针对第二个问题，解决方法是给v-for所在元素的父元素设置overflow为auto

e企智汇
关注
Element InfiniteScroll无限滚动的具体使用方法
10-15
主要介绍了Element InfiniteScroll无限滚动的具体使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于 vue 的elementui的无限滚动组件111.txt
04-20
基于 vue 的elementui的无限滚动组件，全局引入elementui，代码简单易懂，参数少适合理解
element 二次封装滚动下拉加载
最新发布
qq_56249655的博客
08-28 149
1、首先创建文件loadmore-select.vue。这里使用的是v-load-more指令，如图。
element ui无限滚动 InfiniteScroll 触底分页效果 使用及踩坑
未末的博客
11-22 8421
因为要做下拉触底效果，刚好看到element ui有这个无限滚动插件，就打算用一下，以前写的那个效果不好。 踩坑： 1.刚开始不知道需要安装，所以就直接使用导致报错 Failed to resolve directive: infinite-scroll 2.在直接使用的时候，滑动一直不生效。后来换到别的页面是生效的，反复排查发现在顶级div我用到了v-if，v-if初始值是false，在调用了接口之后才是true，这种情况下滚动不生效 3.可能是由于我页面布局的原因，导致我在使用infinite..
Element UI - v-infinite-scroll无限滚动组件
共同进步
06-01 2892
在要实现滚动加载的列表上上添加v-infinite-scroll，并赋值相应的加载方法，可实现滚动到底部时自动执行加载方法。 Element UI - v-infinite-scroll无限滚动组件
element-ui的表格实现无限滚动效果
weixin_43859458的博客
11-24 4049
自定义指令 directives: { tableInfiniteScroll: { bind(el, binding) { let tbody = el.querySelector(".el-table__body-wrapper"); el.tableInfiniteScrollFn = function () { if (this.scrollHeight - this.scrollTop - this.client == 0)
elementui v-infinite-scroll无限滚动 下拉刷新
parkwoojin1102的博客
08-16 1621
/默认情况下，infinite-scroll-disabled是false，因此如果组件使用无限滚动加载组件，即使在vue不进行加载方法的调用，组件也会调用该方法，因此如果需要控制的话，尽量是使用infinite-scroll-disabled属性来进行加载方法是否调用的控制。5、infinite-scroll-immediate //是否立即执行加载方法，以防初始状态下内容无法撑满容器。1、v-infinite-scroll="load" //load无限滚动加载的方法。
简单的 vue基于elementui的无限滚动组件.txt
04-20
简单的 vue基于elementui的无限滚动组件，参数少。代码检简。请全局引入elementui。
最新版ElementUI-web-Axure组件库
03-12
ElementUI-web-Axure组件库将ElementUI的组件移植到Axure中，这意味着设计师可以利用这些组件轻松构建出与实际开发一致的Web界面原型，从而提高设计与开发的协作效率。 这个组件库包含了以下几大类内容： 1. **...
vue-bpmn-element:bpmn.js流程设计器组件，基于vue-elementui美化属性面板，满足90％以上的业务需求
03-20
1、调整设计器UI布局，基于vue-elementui美化属性面板 2、支持设置任务变量、表达式、分支条件等，满足90%以上的业务需求 3、支持flowable和activiti 组件常用方法 1，配置支持flowable（激活） < vue xss=removed>...
vue-elementui-admin
03-20
在这个"vue-elementui-admin"项目中，开发者可以利用Vue.js的生命周期钩子函数、计算属性、指令等功能，结合ElementUI的组件，快速构建出功能完备的后台管理界面。例如，使用`v-for`指令来循环渲染列表数据，使用`v-...
VUE用elementUI实现无限滚动组件（InfiniteScroll）
weixin_45594156的博客
06-06 2156
前言：一个页面引入无限滚动组件，把InfiniteScroll写成组件使用。这里只说明核心部分。 InfiniteScroll组件：包含了样式"**加载中**"、"**没有更多数据**"、"**暂无数据**"样式
elementUI之无限滚动
wanxiweilai的博客
01-16 1175
如何在webview中实现滚动？
解决element-ui中el-select无限滚动（分页）
weixin_43465396的博客
06-15 1961
在浏览器打开小程序
element ui 无限滚动--demo
m0_59941214的博客
05-16 386
记得给父级给"高度"
elementUI无限滚动及搜索后无限滚动自动滑到上次滚动条停留的位置
n_j_q的博客
08-31 499
elementUI无限滚动及搜索后无限滚动自动滑到上次滚动条停留的位置
【vue3】element-plus下拉选择使用无限滚动实现下拉加载
qq_40305332的博客
01-18 1897
它会防止下拉框显示时直接触发无限滚动触底事件；isMounted防止出现‘Unhandled error during execution of directive hook’警告。注意：在此之前应调用getLIst()方法，对下拉数据进行初始化，否则初始数据为空。注意：style="overflow: hidden;template部分。
elementui的el-table使用无限滚动加载
yqlnihao的博客
05-11 5506
elementui的el-table使用无限滚动加载
【区分vue2和vue3下的element UI InfiniteScroll 无限滚动组件，分别详细介绍属性，事件，方法如何使用，并举例】
xiejunlan的博客
07-17 890
需要澄清的是，在 Element UI（Vue 2）和 Element Plus（Vue 3 的 Element UI 官方替代品）中，并没有直接名为的无限滚动组件。然而，Vue 社区和 Element UI/Plus 的用户经常通过结合 Vue 的指令（如，这通常是一个第三方库如提供的）或者自定义组件来实现无限滚动的功能。不过，为了回答你的问题，我将分别介绍在 Vue 2 和 Vue 3 环境下如何结合一个假设的无限滚动功能（可能通过第三方库如）和 Element UI/Plus 组件库来实现无限滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值