主页 > 知识库 > PHP结合Vue实现滚动底部加载效果

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

热门标签:科大讯飞语音识别系统 电子围栏 Mysql连接数设置 银行业务 团购网站 阿里云 Linux服务器 服务器配置

前言

最近的一个项目手机端分页跳转不理想,自己做了一个滚动加载的一个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>

总结

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

您可能感兴趣的文章:
  • vue+php实现的微博留言功能示例
  • vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
  • thinkphp集成前端脚手架Vue-cli的教程图解
  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例
  • Vue 项目中遇到的跨域问题及解决方法(后台php)
  • php和vue配合使用技巧和方法

标签:大理 萍乡 衢州 衡水 蚌埠 江苏 广元 枣庄

巨人网络通讯声明:本文标题《PHP结合Vue实现滚动底部加载效果》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266