项目手机端分页跳转不理想，自己做了一个滚动加载的一个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. HDU 1394 Minimum Inversion Number【 树状数组 】

    题意:给出n个数,每次可以把第一个数挪到最后一个位置去,问这n种排列里面的最小逆序对数 先把最开始的逆序对数求出来 然后对于一个数a[i],比它小的数有a[i] - 1个,比它大的数有n - a[i] ...

  2. 使用rman恢复数据小结

    恢复前提有数据备份 以 alter database open resetlogs 开机以后多要做一次全备(以前的备份失效了) 恢复参数文件: restore spfile from '/home/o ...

  3. ZBrush功能特性之变形

    使用ZBrush内置的变形功能可以让用户对三维网格轻松应用扭曲.拉伸.弯曲及其他各种变化.在ZBrush当中,有超过20种的强大变形类型,可以应用于任何轴向.用户只需单击几次即可创造出高级形状,如图所 ...

  4. （2016北京集训十）【xsy1528】azelso - 概率期望dp

    北京集训的题都是好题啊~~(于是我爆0了) 注意到一个重要的性质就是期望是线性的,也就是说每一段的期望步数可以直接加起来,那么dp求出每一段的期望就行了... 设$f_i$表示从$i$出发不回到$i$ ...

  5. HDU-4370 '0 or 1' 最短路 要考虑连通性

    题目链接:https://cn.vjudge.net/problem/HDU-4370 题意 给一个矩阵C(nn),要我们找到一个矩阵X(nn),满足以下条件: X_{12}+X_{13}+...X_ ...

  6. BZOJ 5104 Fib数列（二次剩余+BSGS）

    斐波那契数列的通项: \[\frac{1}{\sqrt{5}}((\frac{1+\sqrt{5}}{2})-(\frac{1-\sqrt{5}}{2}))\] 设T=\(\sqrt{5}*N\),\ ...

  7. luogu P3674 小清新人渣的本愿（莫队+bitset)

    这题是莫队维护bitset. 然而我并不会bitset以前讲过认为不考就没学 我真的太菜了. 首先维护一个权值的bitset--s. 操作3比较简单,我们可以\(\sqrt{x}\)枚举约数然后判断就 ...

  8. [六省联考2017]分手是祝愿（期望+DP）

    题解 很容易想出来最优策略是什么. 就是从n到1看到开着的灯就把它关了 我们预处理出当前状态把灯全部关闭后的最少步数cnt 然后我们的主人公就要瞎按... 设dp[i]代表当前状态最优解为i步时走到d ...

  9. luogu P1405 苦恼的小明（欧拉定理）

    题意 求a1^a2^a3^...^an(mod10007)n<=1000000,a[i]<=10000 题解 明眼人一眼就可以看出是欧拉定理的推论. 首先这个题是错的,没说保证互质. 然而 ...

  10. spring慕课网

    资源链接 http://spring.io/ http://projects.spring.io/spring-framework/ Spring是什么? Spring是一个开源的轻量级的应用开发框架 ...