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


Posted in Javascript onApril 18, 2019

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

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

这不分页还好,一分页对超过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)

然后在组件中使用

<!-- vue -->
<el-select
 v-model="chatmode"
 placeholder="聊天模式"
 size="mini"
 v-loadmore="loadMore">
 <el-option
  v-for="item in chatmodes"
  :key="item.value"
  :label="item.qa_name"
  :value="item.qa_code"
  :disabled="item.disabled">
 </el-option>
</el-select>
<script>
export default {
 methods: {
  loadMore () {
   // 这里写入要触发的方法
  }
 }
}
</script>

总结

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

Javascript 相关文章推荐
由JavaScript技术实现的web小游戏(不含网游)
Jun 12 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 Javascript
vue自定义filters过滤器
Apr 26 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 #Javascript
vue模式history下在iis中配置流程
Apr 17 #Javascript
详解Vue 全局变量,局部变量
Apr 17 #Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 #Javascript
Angular Excel 导入与导出的实现代码
Apr 17 #Javascript
详解Vue路由自动注入实践
Apr 17 #Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
Apr 17 #Javascript
You might like
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
由document.body和document.documentElement想到的
2009/04/13 Javascript
Javascript 中文字符串处理额外注意事项
2009/11/15 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
详解angular中通过$location获取路径(参数)的写法
2017/03/21 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
2019/01/29 Javascript
基于js实现判断浏览器类型代码实例
2020/07/17 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
Python列表计数及插入实例
2014/12/17 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
优秀班集体申报材料
2014/12/25 职场文书
实习协议书
2015/01/27 职场文书
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL