PHP结合Vue实现滚动底部加载效果

2024-05-05 00:01:28

字体：大中小

来源：转载

供稿：网友

前言

最近的一个项目手机端分页跳转不理想，自己做了一个滚动加载的一个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) ? bodyScrollTop : documentScrollTop;  return scrollTop; } function getWindowHeight() {  var windowHeight = 0;  if (document.compatMode == "CSS1Compat") {   windowHeight = document.documentElement.clientHeight;  } else {   windowHeight = document.body.clientHeight;  }  return windowHeight; }</script>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对VeVb武林网的支持。

注：相关教程知识阅读请移步到PHP教程频道。

上一篇：Laravel框架中自定义模板指令总结

下一篇：PHP7下协程的实现方法详解