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 相关文章推荐
学习并汇集javascript匿名函数
Nov 25 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
angular 服务随记小结
May 06 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
小程序实现录音功能
Sep 22 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
js中查找最近的共有祖先元素的实现代码
2010/12/30 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
js识别uc浏览器的代码
2015/11/06 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
layUI实现三级导航菜单效果
2019/07/26 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
[46:42]DOTA2-DPC中国联赛正赛 Aster vs Magma BO3 第二场 3月5日
2021/03/11 DOTA
python opencv之SIFT算法示例
2018/02/24 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
浅谈python常用程序算法
2019/03/22 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
期末自我鉴定
2014/01/23 职场文书
校园安全检查制度
2014/02/03 职场文书
小学清明节活动总结
2014/07/04 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS