VUE 滚动到底部加载更多(附带指令实现方式)

news/2024/7/10 0:22:11 标签: vue, js, javascript

VUE 滚动到底部加载更多(附带指令实现方式)

直接上代码:

javascript">    mounted() {  
          window.addEventListener('scroll', this.handleScroll, true);
    },
    destroyed() {
        window.removeEventListener('scroll', this.handleScroll);
    },
     methods: {
        /**
         * [handleScroll description]滚动到底部
         *
         * @param   {[type]}  e  [e description]
         *
         * @return  {[type]}     [return description]
         */
        handleScroll(e) {
            if (e.target.scrollTop + e.target.clientHeight >= e.target.scrollHeight) {
                //在此处放入你的加载更多方法
            }
        },
    }

效果:

在这里插入图片描述
2022/8/26更新/
用指令的方式更加方便

js">Vue.directive('drop-down-loadmore',{
    bind(el, binding) {
        const SELECTWRAP_DOM = el;
        SELECTWRAP_DOM.addEventListener('scroll', function() {
            const condition =
            SELECTWRAP_DOM.scrollHeight - SELECTWRAP_DOM.scrollTop <= SELECTWRAP_DOM.clientHeight;
            if (condition) {
                binding.value();
            }
        });
    }
});

http://www.niftyadmin.cn/n/1355243.html

相关文章

eclipse的servlet默认不执行index_MySQL中包含IN子句的语句是怎样执行的

对于开发小伙伴来说&#xff0c;对MySQL中包含IN子句的语句肯定熟悉的不能再熟悉了&#xff0c;几乎天天用&#xff0c;时时用。可是很多小伙伴并不知道包含IN子句的语句是怎样执行的&#xff0c;在一些查询优化的场景中就开始找不着北了&#xff0c;本篇文章就来唠叨一下MySQL…

stylelint 在vue项目中的使用示例

stylelint 在vue项目中的使用 安装 npm i stylelint-config-standard stylelint-order stylelint-declaration-block-no-ignored-properties stylelint stylelint-webpack-plugin -s-d配置文件 根目录上新建stylelint.config.js文件 module.exports {extends: stylelint-co…

mybatis 无法初始化类_MyBatis框架及原理分析

MyBatis的配置MyBatis框架和其他绝大部分框架一样&#xff0c;需要一个配置文件&#xff0c;其配置文件大致如下&#xff1a;<?xml version"1.0" encoding"UTF-8"?>以上配置中&#xff0c;最重要的是数据库参数的配置&#xff0c;比如用户名密码等…

content-type常用参数简介及示例

application/x-www-form-urlencoded 简介&#xff1a; Ajax和JQ的默认值就是"application/x-www-form-urlencoded;charsetutf-8"&#xff0c;是一种常见的post提交数据方式。 不属于http content-type规范&#xff0c;通常用于浏览器表单提交. 数据组织格式:key1…

键盘延迟测试_达尔优EK861无线双模键盘评测:纯粹的输入感

近日&#xff0c;外设天下收到了来自达尔优的EK861机械键盘。这把键盘采用了达尔优自主设计的机械师模具、104键标准配列、可透光的ABS键帽和达尔优自主机械轴体。在EK861这款产品中&#xff0c;达尔优不仅加入了双区独立RGB背光设计&#xff0c;还首次引入了DRS灯光联动系统&a…

golang 框架_Golang 语言 Web 框架 beego v2 之模板

01介绍beego 的模板处理引擎采用的是 Go 内置的 html/template 包进行处理&#xff0c;而且 beego 的模板处理逻辑是采用了缓存编译方式&#xff0c;也就是所有的模板会在 beego 应用启动的时候全部编译然后缓存在 map 里面。02模板处理模板目录beego 的默认模板目录是 views&a…

切片上传文件时,后端拿到的文件名为blob问题

切片上传文件时&#xff0c;后端拿到的文件名为blob问题 表现&#xff1a; 如标题所言&#xff0c;我在将文件切片上传时&#xff0c;后端无法拿到正确的文件命。 分析&#xff1a; 我们并没有手写文件命&#xff0c;所以这件事情只能是系统搞的鬼&#xff0c;打开浏览器控制…

Promise.all的使用

Promise.all的使用 简介&#xff1a; Promise.all可接受多个Promise实例组成的数组。成功时返回一个结果数组&#xff0c;失败时返回最先失败的状态的值。 实操 let xnew Promise(resolve > {const xhr new XMLHttpRequest();... } let promiseArr[x,x,x]; Promise.all(…