摘要：突然有个人问起如何做滚动监听既然你诚心诚意的发问了我就大发慈悲的告诉你武藏小次郎指令可以很好的做这件事情下面以举例用于在的下拉框加上滚动到底事件监听获取定义好的盒子获取元素内容高度只读获取或者设置元素的偏移值常用于计算滚动条
突然有个人问起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();
}
});
}
})
组件中:
// methods
loadMore() {
// 这里可以做你想做的任何事 到底执行
},
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/95177.html
摘要：先来实现局部的滚动加载没有更多了这是测试的数据这是测试的数据这是测试的数据这是测试的数据这是测试的数据这是测试的数据这里监听等于触发获取数据的方法否则不触发我是监听的距离底部的距离判断当前页数大于最后一页加载完毕首次加载页面 先来实现局部的滚动加载 {{item}} ～没有更多了～ ...
摘要：插件开发初体验懒加载前言闲来无事，想自己开发一个简单的懒加载插件，能力的提升我觉得是可以通过编写插件实现，研究了一下官网的插件编写。 Vue插件开发初体验——（懒加载） 前言 闲来无事，想自己开发一个简单的Vue懒加载插件，能力的提升我觉得是可以通过编写插件实现，研究了一下官网的Vue插件编写。马上自己独立开始编写懒加载插件。 一、写在前面 由于我在网上看了很多关于vue插件的实例，发...
摘要：天气预报小程序说了很多小程序开发的基础准备，下面就结合个人实际练手项目天气预报小程序简单说明。物料准备从需求结果导向，天气程序首先要能获取到当前所在地天气状况，再次可以自由选择某地，知道其天气状况。 前言 学习了一段时间小程序，大致过了两遍开发文档，抽空做个自己的天气预报小程序，全当是练手，在这记录下。小程序开发的安装、注册和接入等流程就不罗列了，在小程序接入指南已经写得很清楚了，以下...
摘要：前言如今可谓是一匹黑马数已居第一位前端开发对于的使用已经越来越多，它的优点就不做介绍了本篇是我对使用过程中以及对一些社区朋友提问我的问题中做的一些总结帮助大家踩坑。随后的重新渲染，元素组件及其所有的子节点将被视为静态内容并跳过。 前言 vue如今可谓是一匹黑马,github star数已居第一位！前端开发对于vue的使用已经越来越多，它的优点就不做介绍了,本篇是我对vue使用过程中以及...
阅读 938·2021-11-15 18:00
阅读 2527·2021-09-22 15:18
阅读 1842·2021-09-04 16:45
阅读 575·2019-08-30 15:55
阅读 3629·2019-08-30 13:10
阅读 1224·2019-08-30 11:06
阅读 1871·2019-08-29 12:51
阅读 2180·2019-08-26 13:55
