项目手机端分页跳转不理想，自己做了一个滚动加载的一个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. IP地址的正则表达式写法

    这里讲的是IPv4的地址格式,总长度 32位=4段*8位,每段之间用.分割, 每段都是0-255之间的十进制数值. 将0-255用正则表达式表示,可以分成一下几块来分别考虑: 取值区间 特点 正则写法 ...

  2. (Spring+IBatis+Struts1+Struts2+Hibernate+Java EE+Oracle)

    原文出处:http://space.itpub.net/6517/viewspace-609654 1.Spring架构图 Spring是一个开源框架,是为了解决企业应用程序开发复杂性而创建的.框架的 ...

  3. JQ 添加节点和插入节点的方法总结

    转载来源:http://blog.csdn.net/ss1106404013/article/details/49274345 添加节点的jQuery方法: append().prepend().ap ...

  4. 第五周-磁盘分区GPT、shell脚本练习、lvm详解

    1. 描述GPT是什么,应该怎么使用 Linux中磁盘分区分为MBR和GPT. MBR全称为Master Boot Record,为主引导记录,是传统的分区机制,应用于绝大多数使用的BIOS的PC设备 ...

  5. java 对象 拆箱装箱 编译和反编译的验证

    创建对象 package 创建对象的个数; public class main { public static void main(String[] agrs){ Check c1=new Check ...

  6. 紫书 例题 11-6 UVa 658 （状态压缩+隐式图搜索+最短路）

    这道题用到了很多知识点, 是一道好题目.      第一用了状态压缩, 因为这里最多只有20位, 所以可以用二进制来储存状态 (要对数据范围敏感), 然后 涉及到了一些位运算.     第二这里是隐式 ...

  7. debug和release的区别

    Debug和Release,主要是针对其面向的目标不同的而进行区分的.Debug通常称为调试版本,通过一系列编译选项的配合,编译的结果通常包含调试信息,而且不做任何优化,以为开发人员提供强大的应用程序 ...

  8. Maven学习总结（22）——Maven常用插件介绍

    我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...

  9. 【转】C# 正则表达式大全

    [转]C# 正则表达式大全 前言 在网上看到一个不错的简易版正则匹配和替换的工具,现在补充进来,感觉还不错,效果如下(输入验证中文汉字的正则表达式) 在线下载   密码:5tpt 注:好像也是一位园友 ...

  10. Memcached存储溢出

    Memcached存储溢出 测试数据生成程序: package com.stoon.test; public class TestFor { public static void main(Strin ...