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基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox
Aug 05 Javascript
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
js实现class样式的修改、添加及删除的方法
Jan 20 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
JS定时器用法分析【时钟与菜单中的应用】
Dec 21 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 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微信支付通知的处理方式
2014/05/25 PHP
php定时执行任务设置详解
2015/02/06 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
node安装--linux下的快速安装教程
2017/03/21 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
React Native之ListView实现九宫格效果的示例
2017/08/02 Javascript
js实现登录与注册界面
2017/11/01 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
详解supervisor使用教程
2017/11/21 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
美国隐形眼镜网:Major Lens
2018/02/09 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
Linux操作面试题
2012/05/16 面试题
教师实习自我鉴定
2013/12/11 职场文书
办公室助理岗位职责
2013/12/25 职场文书
《菜园里》教学反思
2014/04/17 职场文书
就业推荐表院系意见
2015/06/05 职场文书
行政复议答复书
2015/07/01 职场文书
关于保护环境的建议书
2019/06/24 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
Go语言基础map用法及示例详解
2021/11/17 Golang
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
MySQL 逻辑备份 into outfile
2022/05/15 MySQL