无限滚动重置服务器,简单无限滚动的实现
在使用elementUI组件库的时候,用到了无限滚动这个功能。我没有看源码,直接在网上学习了下实现的思路,然后自己手动编码以下。在此总结下。
假设页面上有一个盒子容器,容器内有一些子元素。容器的高度是固定的,有纵向滚动条。怎么做到滚动到底部的时候,就能触发事件查询数据呢?
用图形的形式分析下:
image.png
知道思路后,我们就是想办法用代码的形式实现它即可。
js
子元素总高度 scrollHeight
可视区域高度 clientHeight
滚动条纵向偏移量 scrollTop
我把代码贴上来,因为是vue技术栈,所以在vue环境开发,cdn引入即可。(还有个原因是,vue用多了之后,原生js操作dom不太会写了,尴尬 ̄□ ̄||)
无限滚动
#div1 {
width: 500px;
height: 400px;
margin: 50px auto;
overflow-y: scroll;
}
.p1 {
height: 40px;
line-height: 40px;
margin: 5px 0;
background-color: #409EFF;
color: white;
font-size: 16px;
text-align: center;
}
#div1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 10px;
scrollbar-arrow-color:rgba(0,0,0,0.2);
}
#div1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: pink;
scrollbar-arrow-color:rgba(0,0,0,0.2);
}
#div1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: white;
}
new Vue({
el: '#app',
data: {
list: []
},
created() {
for (let i = 1; i <= 10; i++) {
this.list.push("第"+i+"条数据");
}
},
methods: {
scrollCb() {
// 首先找出子元素总高度 scrollHeight
// 再找出可视区域高度 clientHeight
// 滚动条纵向偏移量 scrollTop
// 当 总高 - 可视区域高度 - 纵向偏移量 < 某个最小阈值 的时候,触发无限滚动
const dom = document.getElementById("div1");
const totalHeight = dom.scrollHeight;
const clientHeight = dom.clientHeight;
const scrollTop = dom.scrollTop;
if (totalHeight - clientHeight - scrollTop < 20) {
this.addList();
}
},
addList() {
this.list.push("无限滚动触发");
for (let i = 1; i <= 10; i++) {
this.list.push("第" + i + "条数据");
}
}
}
})
上面的样式无所谓啦,无非是想做的好看点,可能前端都这样吧。效果是这样的,每次滚动到列表底部时,就会增加列表元素。
image.png
进阶下:
在vue中有自定义指令这个鬼东西,elementUI提供的无限滚动也是个自定义指令。我试着将其写成自定义指令的形式。
样式等都是一样的,只是逻辑改了下,采用自定义指令实现
new Vue({
el: '#app',
data: {
list: []
},
created() {
for (let i = 1; i <= 10; i++) {
this.list.push("第"+i+"条数据");
}
},
directives: {
infiniteScroll: {
bind(el, binding, vNode) {
el.onscroll = () => {
const totalHeight = el.scrollHeight;
const clientHeight = el.clientHeight;
const scrollTop = el.scrollTop;
if (totalHeight - clientHeight - scrollTop < 20) {
vNode.context.addList(); // vNode.context指向当前vue实例
}
};
}
}
},
methods: {
addList() {
this.list.push("无限滚动触发");
for (let i = 1; i <= 10; i++) {
this.list.push("第" + i + "条数据");
}
}
}
})
效果和第一个方法是一样的。(还有用vnode上报事件的方法,下次写)
这样,我就简单实现了一个向下的无限滚动功能。学习一个东西的时候,最好自己尝试找解决方法。如果找不到再学习别人的,重要的是理解思路,而不是死记硬背代码,这样才能记得牢固。
无限滚动重置服务器,简单无限滚动的实现相关推荐
- 免费云服务器无限流量,云服务器弄无限流量
云服务器弄无限流量 内容精选 换一换 弹性云服务器(Elastic Cloud Server)是一种可随时自动获取.计算能力可弹性伸缩的云服务器,可帮助您打造可靠.安全.灵活.高效的应用环境,确保服务 ...
- dnf无限重连服务器,dnf无限连接服务器失败解决方法
dnf无限连接服务器失败怎么解决?相信很多小伙伴们都会遇到类似的问题,下面小编给小伙伴们带来了dnf无限连接服务器失败的临时解决办法,一起来看看把! 除了重启怎么办 几天好几次了 刚刚忍不了了 重启烦 ...
- 英雄无限的什么服务器,LOL无限乱斗: 向来都不怕单挑, 就怕服务器扛不住的6个英雄...
原标题:LOL无限乱斗: 向来都不怕单挑, 就怕服务器扛不住的6个英雄 1.狼人 狼人是这周的周免英雄,很多喜欢用狼人打野,但在鱼玩君看来,狼人更适合上单.因为狼人的对线能力是非常强的,毕竟续航能力强 ...
- 无限乱斗服务器卡,无限乱斗上线后,“吉格斯商店、卡顿时有发生”
原标题:无限乱斗上线后,"吉格斯商店.卡顿时有发生" S11赛季的比赛正在如火如荼地进行中,相信绝大多数的玩家都关注了,最近一段时间的春季赛,各大战队的整体状态还算不错. 昨天的时 ...
- 无限乱斗服务器卡,无限乱斗上线后,“局局吉格斯商店卡顿时有发生”
原标题:无限乱斗上线后,"局局吉格斯商店卡顿时有发生" S11赛季的比赛正在如火如荼地进行中,相信绝大多数的玩家都关注了,最近一段时间的春季赛,各大战队的整体状态还算不错. 昨天的 ...
- 乐高无限怎么换服务器,乐高无限新开服应该怎么玩 玩法攻略技巧
大话白蛇无限版1.0.0最新版 类型:角色扮演大小:105.8M语言:中文 评分:10.0 更新:2019-07-23 立即下载 在今天乐高无限开启了全平台测试,很多小伙伴在开测前都玩过内测版,但是新 ...
- 乐高无限无法进入服务器,乐高无限6月13日更新公告 修复部分玩家无法进入游戏等问题...
感谢各位参与到<乐高无限>的冒险体验,本周我们在6月13日10点进行常规版本更新,届时冒险家们登录游戏会收到一个更新提醒~更新后立刻就可以体验到更好的游戏体验,版本更新内的详细内容如下 生 ...
- 无限试驾2 服务器,《无限试驾 2》PC版本配置需求公布
[游侠新闻]今天国外媒体登出了<无限试驾2>PC版本的硬件配置需求,看起来要玩转这款游戏还是需要配备一款旗舰显卡.这也许还不保证你在高清显示器下开启高倍AA还能否流畅运行游戏. 最低配置: ...
- 乐高无限开什么服务器,乐高无限国服开服在即 会有什么好玩的发生呢
儿时我们都有过购买拼装积木的回忆,因为丰富的变化性让这个积木玩具玩出了不同的花样,而乐高也将这款游戏搬上虚拟的世界,以一个虚拟乐高重塑人们的认识,如今手机版的乐高也来了,让我们一起来看看 乐高无限是一 ...
最新文章
- OpenCV代码提取:flip函数的实现
- libsndfile动态库在VS2010下面的调用
- 北大图灵班本科生带来动画CG福音,「最懂骨骼的卷积网络」,无需配对样本实现动作迁移 | SIGGRAPH...
- [再寄小读者之数学篇](2014-04-22 平方差公式在矩阵中的表达)
- 微软:求你们别再用 IE 浏览器了
- Apache Licene 2.0 协议说明
- 高中计算机试题一,職业高中高考计算机专业试卷1.doc
- 为什么说要注销 QQ 的,都是君子呢?
- python练习题及答案-Python练习题
- mysql多值存储过程_mysql使用存储过程回来多个值
- 使用Python语言实现凯撒密码的加密和解密
- 2020年初全国行政区划矢量数据
- 软件项目管理和实施方案
- 原创度检测工具-免费原创度检测软件-在线伪原创免费工具
- 在RStudio里面部署Python
- webstorm下载破解
- 用C语言来实现_输入一个日期(年月日),计算是这一年中的第几天
- css规则定义的分类,.css规则定义
- React Native桥接器初探
- 口袋超萌服务器维护中,平民全攻略1
热门文章
- 使用Regions ADF 11g进行Master Detail CRUD操作
- 使用SPANN方式将Spring&Quartz与自定义注释集成
- JavaFX 2.0 beta示例应用程序和思考
- Linux 如何安装 SRPM 包(源代码 rpm 软件包,以 .src.rpm 为后缀名)/rpm 格式的源码软件包/源码包
- union的作用 c语言,C语言(union类型及应用)
- java 中怎么加汉字,jquery怎么向body里面增加文字
- matlab 传输速率,处理速率转换
- MATLAB Simulink
- MathWorks 中国
- pytorch load state dict_PyTorch 学习笔记(五):Finetune和各层定制学习率
- FFmpeg options
- html中的文档格式及举例,跟我一起从零开始学习WebAssembly(三)、最简单的例子hello world(使用自定义HTML模板)...