热门标签 | HotTags
当前位置:  开发笔记 > 运维 > 正文

在element-ui的select下拉框加上滚动加载

这篇文章主要介绍了在element-ui的select下拉框加上滚动加载,本文以以element-ui中的select为例,给大家介绍的非常详细,需要的朋友可以参考下

 在项目中,我们需要运用到很多来自后端返回的数据。有时是上百条,有时甚至上千条。如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此。

自然,后端就做了一项非常“漂亮”的交互体验数据——分页

这不分页还好,一分页对超过10条数据之后的本来也不多,就20条,偏偏还得做个分页器。(假设为10条)

此时,如果能够像购物商城那样拖拽到底部自动加载新数据就好了。

于是《在element-ui的select下拉框加上滚动加载》诞生了。

这里通过自定义封装vue指令进行封装。(什么是指令:官方指令叫v-on,v-model)

以下以element-ui中的select为例:

 在main.js同级别文件中添加directives.js:

// directives.js

import Vue from 'vue'
Vue.directive('loadmore', {
 bind (el, binding) {
  // 获取element-ui定义好的scroll盒子
  const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
  SELECTWRAP_DOM.addEventListener('scroll', function () {
   
   const COnDITION= this.scrollHeight - this.scrollTop <= this.clientHeight
   if (CONDITION) {
    binding.value()
   }
  })
 }
})
  • v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
  • scrollHeight 获取元素内容高度(只读)
  • scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
  • clientHeight 读取元素的可见高度(只读)

如果元素滚动到底, 下面等式返回true, 没有则返回false

scrollHeight - scrollTop === clientHeight

这里运用到了滚动偏移来做监听来处理,这与聊天对话框中默认下拉到底部的原理是大同小异的,后续我会有专门的文章进行讲解。

// main.js
// 注册滚动条加载触发事件v-loadmore绑定
import directives from './directives'
Vue.use(directives)

然后在组件中使用



 
 

总结

以上所述是小编给大家介绍的在element-ui的select下拉框加上滚动加载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


推荐阅读
  • Kubernetes 持久化存储与数据卷详解
    本文深入探讨 Kubernetes 中持久化存储的使用场景、PV/PVC/StorageClass 的基本操作及其实现原理,旨在帮助读者理解如何高效管理容器化应用的数据持久化需求。 ... [详细]
  • 本文作者分享了在阿里巴巴获得实习offer的经历,包括五轮面试的详细内容和经验总结。其中四轮为技术面试,一轮为HR面试,涵盖了大量的Java技术和项目实践经验。 ... [详细]
  • 本月初,我们为大家推荐了一系列精选书单,助力大家提升技术水平。月底,我们将介绍几位行业大牛,帮助大家找到人生导师。InfoQ一直致力于为用户提供有价值的资源和支持。 ... [详细]
  • 本文详细介绍了如何使用Docker运行最简单的镜像,并创建第一个容器。通过具体的操作步骤和命令解释,帮助初学者快速上手Docker。完整课程请点击:Docker入门教程。 ... [详细]
  • 深入解析SpringMVC核心组件:DispatcherServlet的工作原理
    本文详细探讨了SpringMVC的核心组件——DispatcherServlet的运作机制,旨在帮助有一定Java和Spring基础的开发人员理解HTTP请求是如何被映射到Controller并执行的。文章将解答以下问题:1. HTTP请求如何映射到Controller;2. Controller是如何被执行的。 ... [详细]
  • 深入解析Spring启动过程
    本文详细介绍了Spring框架的启动流程,帮助开发者理解其内部机制。通过具体示例和代码片段,解释了Bean定义、工厂类、读取器以及条件评估等关键概念,使读者能够更全面地掌握Spring的初始化过程。 ... [详细]
  • PostgreSQL 最新动态 —— 2022年4月6日
    了解 PostgreSQL 社区的最新进展和技术分享 ... [详细]
  • 本文详细介绍了如何在 Android 中使用值动画(ValueAnimator)来动态调整 ImageView 的高度,并探讨了相关的关键属性和方法,包括图片填充后的高度、原始图片高度、动画变化因子以及布局重置等。 ... [详细]
  • docker镜像重启_docker怎么启动镜像dock ... [详细]
  • 本文将详细探讨 Java 中提供的不可变集合(如 `Collections.unmodifiableXXX`)和同步集合(如 `Collections.synchronizedXXX`)的实现原理及使用方法,帮助开发者更好地理解和应用这些工具。 ... [详细]
  • 深入解析Docker镜像的工作机制
    本文旨在深入探讨Docker镜像的内部结构及其工作机制,包括镜像的分层体系、联合文件系统(UnionFS)的应用,以及各层如bootfs和rootfs的具体作用。 ... [详细]
  • 本文探讨了如何通过一系列技术手段提升Spring Boot项目的并发处理能力,解决生产环境中因慢请求导致的系统性能下降问题。 ... [详细]
  • 本文将详细介绍Nose这一非标准库的Python测试框架,它虽然不是Python官方发行版的一部分,但与unittest框架紧密相关,旨在通过简化测试流程来提升开发效率。 ... [详细]
  • 深入解析Hadoop的核心组件与工作原理
    本文详细介绍了Hadoop的三大核心组件:分布式文件系统HDFS、资源管理器YARN和分布式计算框架MapReduce。通过分析这些组件的工作机制,帮助读者更好地理解Hadoop的架构及其在大数据处理中的应用。 ... [详细]
  • 烤鸭|本文_Spring之Bean的生命周期详解
    烤鸭|本文_Spring之Bean的生命周期详解 ... [详细]
author-avatar
手机用户2502927925
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有