前言
最近的一个项目手机端分页跳转不理想,自己做了一个滚动加载的一个Demo,下面话不多说了,来一起看看详细的介绍吧。
实现思路
1.获得滚动条到底部的距离 getScrollBottomHeight()
2.绑定滚动事件handleScroll()
,handleScroll()
判断滚动条到底部距离是否小于设置的bottomHight,并且增加一个loading属性,防止加载时滑动时多次触发,造成多次加载
3.Ajax请求load.php,通过Page去查询获得当前页数(page+1)的内容
4.将获取的内容,push 到 list中,完成后Vue 自动渲染新的列表,loading变为false
核心Dom结构
<body> <div id="Content"> <div> <ul> <li v-for="l in list">{{l.title}}</li> <li class="loading" v-if="loading">加载中</li> </ul> </div> </div> </body>
Javascript代码
<script> var v = new Vue({ el: "#Content", data: { list: [{title: "使用思维导图,优雅的完成自己的代码"}, {title: "左滑右滑的乐趣"}, {title: "Spring Cloud(九)高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务q"}, {title: "【MYSQL】业务上碰到的SQL问题整理集合"}, {title: "2018年,前端应该怎么学?"}, {title: "前端 ajax 请求的优雅方案"}, {title: "SegmentFault 技术周刊 Vol.39 - 什么!服务器炸了?"}, {title: "Rokid 开发板试用,开启你的嵌入式开发之旅"}, {title: "我脑中飘来飘去的css魔幻属性"}, {title: "用python解决mysql视图导入导出依赖问题"}, {title: "underscore 系列之防冲突与 Utility Functions"}, {title: "基于手淘 flexible 的 Vue 组件:TextScroll -- 文字滚动"}, {title: "基于‘BOSS直聘的招聘信息'分析企业到底需要什么样的PHP程序员"}, {title: "原生js系列之无限循环轮播组件"}, {title: "一篇文章了解HTML文档流(normal flow)"}, {title: "面试官最爱的volatile关键字"}, {title: "Spring Cloud(九)高可用的分布式配置中心 Spring Cloud Config 集成 Eureka 服务q"}, {title: "【MYSQL】业务上碰到的SQL问题整理集合"}, {title: "2018年,前端应该怎么学?"}, {title: "前端 ajax 请求的优雅方案"}, {title: "SegmentFault 技术周刊 Vol.39 - 什么!服务器炸了?"}, {title: "Rokid 开发板试用,开启你的嵌入式开发之旅"}, {title: "我脑中飘来飘去的css魔幻属性"}, {title: "用python解决mysql视图导入导出依赖问题"}, {title: "underscore 系列之防冲突与 Utility Functions"}, {title: "基于手淘 flexible 的 Vue 组件:TextScroll -- 文字滚动"}, {title: "基于‘BOSS直聘的招聘信息'分析企业到底需要什么样的PHP程序员"}, {title: "原生js系列之无限循环轮播组件"}, {title: "一篇文章了解HTML文档流(normal flow)"}, {title: "面试官最爱的volatile关键字"}, {title: "Rokid 开发板试用,开启你的嵌入式开发之旅"}], page: 5,//总页数 nowPage: 1,//本页 loading: false,//一步加载时的限制 bottomHight: 50,//滚动条到某个位置才触发时间 }, methods: { handleScroll: function () { if (getScrollBottomHeight() <= v.bottomHight && v.nowPage < v.page && v.loading == false) { v.loading = true var url = "load.php" $.ajax({ type: "GET", url: url, async: true, dataType: "json", success: function (data) { for (var i = 0; i < data.length; i++) { v.list.push(data[i]) } v.nowPage++ v.loading = false }, }) } } }, }) //添加滚动事件 window.onload = function () { window.addEventListener('scroll', v.handleScroll) } //滚动条到底部的距离 function getScrollBottomHeight() { return getPageHeight() - getScrollTop() - getWindowHeight(); } //页面高度 function getPageHeight() { return document.querySelector("html").scrollHeight } //滚动条顶 高度 function getScrollTop() { var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if (document.body) { bodyScrollTop = document.body.scrollTop; } if (document.documentElement) { documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) "CSS1Compat") { windowHeight = document.documentElement.clientHeight; } else { windowHeight = document.body.clientHeight; } return windowHeight; } </script>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月25日
2024年09月25日
- 纯音入心系列纯音乐《天籁古筝》1CD[MP3][331MB]
- 男女对唱典藏天碟《发烧对唱·那个季节里的歌DSD》10CD[WAV]
- 群星2010-歌林精选辑[歌林][WAV+CUE]
- TrioZimbalist-PianoTriosofWeinberg,Auerbach,Dvorak(2024)[24-44,1]wav
- 群星.1992-滚石第一流台湾歌·12王牌大车拼【滚石】【WAV+CUE】
- 林子祥.1984-创作歌集【华纳】【WAV+CUE】
- 周汤豪.2010-周汤豪【华纳】【FLAC分轨】
- Mozart-TheStringQuintets-AmadeusQuartet,CecilAronowitz(2017)[24-44,1][WAV+CUE]
- JamesWilliamsDennisIrwin-Focus(2024,Red)[24-48]FLAC
- 藤泽麻衣《空みあげて》[WAV]
- 纯音入心系列纯音乐《中国古筝经典名曲》1CD[MP3][1.3GB]
- 纯音入心系列纯音乐《古筝新奏:岁月静好与筝语,细水流年与筝同》1CD[MP3][846.9MB]
- 670《脆弱敏感小女生》[320K/MP3][27.53MB]
- 曾琳.2011-好好爱我【南方】【WAV+CUE】
- 范晓萱.1995-RAIN【福茂】【WAV+CUE】