无为清净楼资源网

PHP结合Vue实现滚动底部加载效果
网络编程 2024/11/18 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

前言

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

总结

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

标签：
vue.js结合php,vue实现滚动加载,vue实现上拉加载
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接