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 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
div模拟选择框示例代码
Nov 03 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
JavaScript实现滚动加载更多
Dec 27 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 MemCached 高级缓存应用代码
2010/08/05 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
用ADODB.Stream转换
2007/01/22 Javascript
五个jQuery图片画廊插件 推荐
2011/05/12 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
用Python进行行为驱动开发的入门教程
2015/04/23 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python写入已存在的excel数据实例
2018/05/03 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
pygame实现俄罗斯方块游戏(基础篇2)
2019/10/29 Python
pytorch masked_fill报错的解决
2020/02/18 Python
Python 如何查找特定类型文件
2020/08/17 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
小组合作学习反思
2014/02/18 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server