结合Vue 的滚动底部加载

<p>项目手机端分页跳转不理想,本身作了一个滚动加载的一个Demo</p> <blockquote><strong>核心Dom结构</strong></blockquote>php

&lt;body&gt;
&lt;div id="Content"&gt;
    &lt;div&gt;
        &lt;ul&gt;
            &lt;li v-for="l in list"&gt;{{l.title}}&lt;/li&gt;
            &lt;li class="loading" v-if="loading"&gt;加载中&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;

<blockquote> ```css

Javascript代码html

</blockquote>

<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 &gt; 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>python

<blockquote><strong>实现思路</strong></blockquote>

1.得到滚动条到底部的距离 getScrollBottomHeight() 2.绑定滚动事件handleScroll(),handleScroll()判断滚动条到底部距离是否小于设置的bottomHight,而且增长一个loading属性,防止加载时滑动时屡次触发,形成屡次加载 3.Ajax请求load.php,经过Page去查询得到当前页数(page+1)的内容 4.将获取的内容,push 到 list中,完成后Vue 自动渲染新的列表,loading变为falsemysql

<blockquote>感谢你阅读个人文章,若是有错误或不足能够给我评论留言</blockquote>

                
                                                
原文地址:https://segmentfault.com/a/1190000012440716
相关文章
相关标签/搜索