项目手机端分页跳转不理想，自己做了一个滚动加载的一个Demo

核心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代码

</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>



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

1.获得滚动条到底部的距离 getScrollBottomHeight()

2.绑定滚动事件handleScroll()，handleScroll()判断滚动条到底部距离是否小于设置的bottomHight，并且增加一个loading属性，防止加载时滑动时多次触发，造成多次加载

3.Ajax请求load.php，通过Page去查询获得当前页数（page+1）的内容

4.将获取的内容，push 到 list中，完成后Vue 自动渲染新的列表，loading变为false



<blockquote>感谢你阅读我的文章，如果有错误或不足可以给我评论留言</blockquote>

原文地址：https://segmentfault.com/a/1190000012440716

结合Vue 的滚动底部加载的更多相关文章

  1. div滚动底部加载li,window滚动底部加载li

    DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  2. jQuery页面滚动底部加载数据

    $(window).scroll(function () {        var scrollTop = $(this).scrollTop();        var scrollHeight = ...

  3. JQuery ajax 滚动底部加载更多

    <%@ Page Language="C#" %> <%@ Import Namespace="System.IO" %> <%@ ...

  4. 滚动到底部加载更多及下拉刷新listview的使用

    最新内容建议直接访问原文:滚动到底部加载更多及下拉刷新listview的使用 本文主要介绍可同时实现下拉刷新及滑动到底部加载更多的ListView的使用. 该ListView优点包括:a. 可自定义下 ...

  5. Android中GridView滚动到底部加载数据终极版

    之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...

  6. XRecyclerView：实现下拉刷新、滚动到底部加载更多以及添加header功能的RecyclerView

    介绍: 一个实现了下拉刷新,滚动到底部加载更多以及添加header功能的的RecyclerView.使用方式和RecyclerView完全一致,不需要额外的layout,不需要写特殊的adater. ...

  7. vue滚动分页加载

    做了一个项目,要求将后台数据滚动加载. 滚动加载必须要求后台传的接口中由pageSize和pageIndex两个参数,来判断每次传数据的条数和数据的页码. 首先要判断滑轮是向上滚动还是向下滚动,可以在 ...

  8. vue 中监测滚动条加载数据（懒加载数据）

    vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...

  9. yii2 如何在页面底部加载css和js

    作者:白狼 出处:www.manks.top/article/yii2_load_js_css_in_end 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接 ...

随机推荐

  1. C#.Net版本自动更新程序及3种策略实现

    C#.Net版本自动更新程序及3种策略实现 C/S程序是基于客户端和服务器的,在客户机编译新版本后将文件发布在更新服务器上,然后建立一个XML文件,该文件列举最新程序文件的版本号及最后修改日期.如程序 ...

  2. 如何让一台IIS服务器实现多个网站https访问

    找到注册表项:HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\HTTP\Parameters\SslSniBindingInfo,将注册表值改 ...

  3. PHP正则表达式函数总结

    /* 测试环境:PHP5.3.29(PCRE8.32) */ 常用函数:(正则表达式规则基本同JS_RE_Read.txt) PS:1.PHP中的PCRE一般仅使用这三个修饰符:"i&quo ...

  4. STM8S103 解决Rom空间不足 & Map文件分析

    STM8S103只有8KRom,很容易造成空间不足.对于空间不足,我们就要从map文件着手分析,究竟哪些函数占了多少空间,map文件分为几部分:Segments(总括了各个段所占的空间), Modul ...

  5. cx-oracle-------------------安装

    这个东西弄完就报错.... 这个是Oracle官方的方法:https://oracle.github.io/odpi/doc/installation.html#windows 然而,你懂的,不能用啊 ...

  6. python编写登录与注册

    #编写简单的注册与登陆模块 #使用死循环来检测 while True: #如果条件为真,则一直循环 sum=3 #定义密码输入的次数 username = input("请输入用户名:&qu ...

  7. Lorenzini:Laplacian与图上的黎曼-罗赫定理

    前两天去听了一下搞代数几何的Dino Lorenzini在交大的两场讲座(“On Laplacian Of Graphs and Generalization”,“Riemann-Roch Theor ...

  8. phpstorm 激活方法

    1.本地破解激活(推荐) 下载JetbrainsCrack-2.5.6.jar 链接: http://pan.baidu.com/s/1miPpE2k 密码: w3yc 放到phpstorm安装目录下 ...

  9. cocos2dx2.0 与cocos2dx3.1 创建线程不同方式总结

    尽管内容是抄过来的.可是经过了我的验证.并且放在一起就清楚非常多了,cocos2dx版本号常常变化非常大.总会导致这样那样的问题. cocos2dx2.0 中 1. 头文件 #include < ...

  10. 英语影视台词---四、Sideways

    英语影视台词---四.Sideways 一.总结 一句话总结:杯酒人生 Sideways,大致意思是“偏离.倾斜.转向…”.很明显中文译名与英文原名并没有什么关联,<杯酒人生>这个名字,其 ...