vue指令做滚动加载和监听等


Posted in Javascript onMay 26, 2019

突然有个人问起vue如何做滚动监听?

既然你诚心诚意的发问了, 我就大发慈悲的告诉你.(武藏 & 小次郎)

指令可以很好的做这件事情, 下面以element-select举例:

directives.js

// v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
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() {

     /*
      * scrollHeight 获取元素内容高度(只读)
      * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
      * clientHeight 读取元素的可见高度(只读)
      * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
      * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
      */
     const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
     
     if(CONDITION) {
       binding.value();
     }
   });
  }
})

组件中:

<template>
  <el-select 
    v-model="selectValue" 
    v-loadmore="loadMore">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.accountName"
      :value="item.id">
    </el-option>
  </el-select>
</template>

// methods
loadMore() {
  // 这里可以做你想做的任何事 到底执行
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
javascript html5摇一摇功能的实现
Apr 19 Javascript
js HTML5多媒体影音播放
Oct 17 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
Jun 22 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 Javascript
vxe-table vue table 表格组件功能
May 26 #Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 #Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 #Javascript
vue项目打包后怎样优雅的解决跨域
May 26 #Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 #Javascript
vue实现的请求服务器端API接口示例
May 25 #Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 #Javascript
You might like
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
yii上传文件或图片实例
2014/04/01 PHP
常用PHP框架功能对照表
2014/10/23 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
javascript实现简单的Map示例介绍
2013/12/23 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
jQuery Easyui快速入门教程
2016/08/21 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python下载微信公众号相关文章
2019/02/26 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
python 项目目录结构设置
2020/02/14 Python
浅析Python中字符串的intern机制
2020/10/03 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
专科应届生求职信
2013/11/24 职场文书
英文简历中的自我评价用语
2013/12/09 职场文书
搞笑创意广告语
2014/03/17 职场文书
工作会议方案
2014/05/21 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
先进个人事迹材料
2014/12/29 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL