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 相关文章推荐
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
Dec 21 Javascript
js中的hasOwnProperty和isPrototypeOf方法使用实例
Jun 06 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 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
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
一个封装js代码-----展开收起效果示例
2013/07/03 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
针对初学者的jQuery入门指南
2015/08/15 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Angularjs的启动过程分析
2017/07/18 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
python实现扫描ip地址的小程序
2019/04/16 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
Python pandas库中的isnull()详解
2019/12/26 Python
python使用配置文件过程详解
2019/12/28 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
应征英语教师求职信
2013/11/27 职场文书
食堂个人先进事迹
2014/01/22 职场文书
服装店营销方案
2014/03/10 职场文书
项目合作协议书
2014/04/16 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
结婚通知短信大全
2015/04/17 职场文书
卫生院艾滋病宣传活动总结
2015/05/09 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
九不准学习心得体会
2016/01/23 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
基于Python实现将列表数据生成折线图
2022/03/23 Python