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 相关文章推荐
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
PassWord输入框代码分享
Jun 07 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
node+vue实现用户注册和头像上传的实例代码
Jul 20 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
JavaScript选择排序算法原理与实现方法示例
Aug 06 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
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
使用PHP获取网络文件的实现代码
2010/01/01 PHP
使用array mutisort 实现按某字段对数据排序
2013/06/18 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
2013/02/06 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
Fabric 应用案例
2016/08/28 Python
python+django快速实现文件上传
2016/10/24 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
python如何实现从视频中提取每秒图片
2020/10/22 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
材料会计岗位职责
2014/03/06 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
2016春节慰问信范文
2015/03/25 职场文书
经营目标责任书
2015/05/08 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python