js实现滚轮滑动到底部自动加载(完整版)

这里我们用vue实现(原生js相似),

这里我们用一个div当作一个容器;

<div class="JL" @scroll="onScroll" ref="inin">        <div v-for="(item,index) in this.list" :key="index" >                .....        </div></div>data(){        return{//展示数据                list:[],//是否正在加载isLoading:false,//是否无数据可加载isNoMore:false,page:""        }}

css样式

给上面div添加一个高度

.JL{        height:200px;        //自动生成滚动条        overflow:auto;}

在methods中编写我们的滚动条方法

onScroll(){

       // let innerHeight=document.querySelector("JL").clientHeight //js中使用

        //let scrollHeight=document.querySelector("JL").scrollHeight         //js中使用

     

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/50162.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript:交集和差集的应用场景

在集合A和集合B中&#xff0c;属于集合A&#xff0c;同时也属于集合B的元素组成的集合&#xff0c;就是交集。 在A中所有不属于集合B元素&#xff0c;组合成集合&#xff0c;就是差集。 那么在平时的开发中&#xff0c;如何使用差集和交集来解决问题呢&#xff1f; 现在有这…

springboot小知识:配置feign服务超时时间

背景&#xff1a;当前项目通过feign服务调用了其他两个项目的接口&#xff0c;但是由于特殊需求&#xff0c;需要调整某一个项目的feign服务的默认超时时间&#xff1a; 默认连接超时10秒&#xff0c;默认读取超时时间 60秒 1.找到定义的FeignClient 2.根据FeignClient定义的名…

派森 #P128. csv存json格式

描述 编写一个 Python 程序&#xff0c;读取movie.in&#xff08;csv格式&#xff0c;utf-8编码&#xff09; 的数据&#xff0c;将数据转成保存到movie.out(接送格式&#xff0c;utf-8编码)文件中。 格式 输入 movie.in文件&#xff0c;测试格式&#xff0c;utf-8编码。 …

国内ChatGPT对比与最佳方案

很久没写内容了&#xff0c;主要还是工作占据了太多时间。简单分享下我这段时间的研究吧,由于时间仓促&#xff0c;有很多内容没有具体写&#xff0c;请自行到我分享的网站体验查看。 前言 ChatGPT 的出现确实在很大程度上改变了世界。许多人已经亲身体验到了ChatGPT作为一个…

GOLANG面向对象:封装 继承 多态

面向过程转换到面向对象&#xff0c;那么必然会涉及到几个特性&#xff1a;封装&#xff0c;继承&#xff0c;多态&#xff0c;那么Golang中的面向过程会有什么特性&#xff1f;那我们来仔细说一说&#xff1a; 封装&#xff1a; 首先要一个类的概念&#xff0c;类就像一下工厂…

HarmonyOS应用开发者高级认证练习题

系列文章目录 HarmonyOS应用开发者基础认证练习题 HarmonyOS应用开发者高级认证练习题 文章目录 系列文章目录前言一、判断二、单选三、多选 前言 本文所有内容来源于个人进行HarmonyOS应用开发者系列认证的学习过程中所做过的练习题&#xff0c;所有答案均是个人作答&#x…

iptables防火墙(SNAT与DNAT)

目录 1 SNAT 1.1 SNAT原理与应用 1.2 SNAT工作原理 1.3 SNAT转换前提条件 2 SNAT示例 ​编辑 2.1 网关服务器配置 2.1.1 网关服务器配置网卡 2.1.2 开启SNAT命令 2.2 内网服务器端配置 2.3 外网服务器端配置 2.4 网卡服务器端添加规则 2.5 SNAT 测试 3 DNAT 3.1 网卡…

wazuh环境配置及案例复现

文章目录 wazuh环境配置及案例复现wazuh环境配置 案例复现 wazuh环境配置及案例复现 wazuh环境配置 进入官网下载ova软件 https://documentation.wazuh.com/current/deployment-options/virtual-machine/virtual-machine.html 打开下载的ova&#xff0c;密码和用户名会显示…

2分钟搭建自己的GPT网站

如果觉得官方免费的gpt&#xff08;3.5&#xff09;体验比较差&#xff0c;总是断开&#xff0c;或者不会fanqiang&#xff0c;那你可以自己搭建一个。但前提是你得有gpt apikey。年初注册的还有18美金的额度&#xff0c;4.1号后注册的就没有额度了。不过也可以自己充值。 有了…

开发一个npm组件包

vue项目初始化 vue create mytest 启动项目以后 组件开发 开发的组件写在 package中 如下如例 开发一个 listpage的组件 里面放了一个a链接注册组件配置打包 "package": "vue-cli-service build --target lib ./src/package/index.js --name managerpage -…

linux文本三剑客

linux文本三剑客 1、grep2、sed 1、grep 过滤 参数用法作用-igrep -i STRING xxx.txt从xxx.txt文件查找不区分大小写STRING-wgrep -w STRING xxx.txt精确匹配STRING-egrep -e STRING1 -e STRING2 xxx.txt查找多个STRING行-ngrep -n STRING xxx.txt查看STRING 在第几行-vgrep …

使用mysql:5.6和 owncloud 镜像,构建一个个人网盘。

文章目录 1、使用mysql:5.6和 owncloud 镜像&#xff0c;构建一个个人网盘。2、安装搭建私有仓库 Harbor3、编写Dockerfile制作Web应用系统nginx镜像&#xff0c;生成镜像nginx:v1.1&#xff0c;并推送其到私有仓库。具体要求如下&#xff1a;4、Dockerfile快速搭建自己专属的L…

统计学补充概念07-比较树

概念 在层次聚类中&#xff0c;聚类结果可以以树状结构表示&#xff0c;通常称为树状图&#xff08;Dendrogram&#xff09;。树状图展示了数据点如何被合并或分裂以形成聚类的层次结构。通过观察树状图&#xff0c;可以更直观地理解数据点之间的相似性和关系。 在比较树状图…

【每日一招小技巧】编译安装提升系统自带的java版本

hello&#xff0c;大家好&#xff0c;又到了每日一招的环节&#xff0c;今天要给大家介绍的是&#xff0c;如何用源码安装的方式&#xff0c;升级系统自带的ava版本&#xff01; 首先&#xff0c;我们要查看一下我们系统自带的java版本是多少&#xff0c;怎么查看呢&#xff1…

机器学习简介

文章目录 引言1. 从找规律说起2. 机器学习应用2.1 有监督学习2.2 无监督学习2.2.1 聚类2.2.2 降维 3. 机器学习一般流程4. 机器学习常用概念5. 深度学习简介5.1 引入 -- 猜数字5.2 深度学习5.2.1 隐含层/中间层5.2.2 随机初始化5.2.3 损失函数5.2.4 导数与梯度5.2.5 梯度下降5.…

协议的分层结构

1.1TCP/IP 协议 为了使各种不同的计算机之间可以互联&#xff0c;ARPANet指定了一套计算机通信协议&#xff0c;即TCP/IP 协议(族). 注意TCP /IP 协议族指的不只是这两个协议 而是很多协议&#xff0c; 只要联网的都使用TCP/IP协议族 为了减少 协议设计的复杂度 &#xff0c;大…

【Nginx】Nginx 简介

Ngnix 特点 模块化设计&#xff1a;良好的扩展性&#xff0c;可以通过模块方式进行功能扩展。高可靠性&#xff1a;主控进程和 worker 是同步实现的&#xff0c;一个 worker 出现问题&#xff0c;会立刻启动另一个 worker。内存消耗低&#xff1a;一万个长连接&#xff08;kee…

Php“牵手”淘宝商品销量数据采集方法,淘宝API接口申请指南

淘宝天猫商品销量接口 API 是开放平台提供的一种 API 接口&#xff0c;它可以帮助开发者获取商品的详细信息&#xff0c;包括商品的标题、描述、图片&#xff0c;月销量&#xff0c;总销量等信息。在电商平台的开发中&#xff0c;销量接口API是非常常用的 API&#xff0c;因此本…

什么是遗传算法(Genetic Algorithm,简称 GA)?

目录 一、遗传算法介绍二、遗传算法应用场景三、遗传算法具体案列1、求解旅行商问题&#xff08;TSP 问题&#xff09;2、求解一个矩阵中的最大值3、基于遗传算法的图像压缩方法 四、遗传算法重要意义五、生物进化与遗传算法之间的关系 一、遗传算法介绍 遗传算法&#xff08;…

VUE id回写name的问题

起因 我们有部门&#xff0c;单位&#xff0c;传的是id&#xff0c;但是页面不管显示&#xff0c;还是回写&#xff0c;新增都要展示单位名/部门名。这个其实是前端的事情&#xff0c;但是我目前是前端也是我做&#xff0c;我们使用的是vue3&#xff0c;这个问题用List可能不好…