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

    1.下载两个软件:msysgit,TortoiseGit 2.先安装msysgit,再安装TortoiseGit,安装过程保持默认即可. 3.为了安全,我们需要使ssh key.开始菜单--Torto ...

  2. Android自定义TabBar

    转载请说明出处:http://www.sunhome.org.cn 我发现现在的移动开发界面都被iOS主导了,UI动不动设计出来的东西都是ios的风格,对于一个做Android的程序员来说甚是苦恼啊, ...

  3. 路飞学城-Python开发-第二章

    ''' 数据结构: menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{}, '网易':{}, 'google':{} }, '中关村':{ '爱奇艺':{}, '汽车之家' ...

  4. How Javascript works (Javascript工作原理) (四) 事件循环及异步编程的出现和 5 种更好的 async/await 编程方式

    个人总结: 1.讲解了JS引擎,webAPI与event loop合作的机制. 2.setTimeout是把事件推送给Web API去处理,当时间到了之后才把setTimeout中的事件推入调用栈. ...

  5. ES6学习笔记（二十一）编程风格

    本章探讨如何将 ES6 的新语法,运用到编码实践之中,与传统的 JavaScript 语法结合在一起,写出合理的.易于阅读和维护的代码. 1.块级作用域 (1)let 取代 var ES6 提出了两个 ...

  6. Vue 中 换行符获取

    当要获取到 vue 中 文本域的换行符时, 需要用到正则匹配. let reg = new RegExp('/n',"g"); let str = text.replace(reg ...

  7. [NOIP2011提高组]Mayan游戏

    题目:洛谷P1312.Vijos P1738.codevs1136. 题目大意:在一个7行5列的棋盘(左下角坐标0,0)上,有一些不同颜色的棋子. 规定某一时刻,连续三个横排或竖列的棋子颜色相同,则它 ...

  8. BZOJ 4103 [Thusc 2015]异或运算 (可持久化01Trie+二分)

    题目大意:给你一个长方形矩阵,位置$i,j$上的数是$a_{i}\;xor\;b_{j}$,求某个子矩阵内第$K$大的值 最先想的是二分答案然后验证,然而是$O(qnlogmloga_{i})$,不出 ...

  9. 安装 glusterfs yum源报错

    yum install glusterfs-server yum 一直报错 把/etc/yum.repos.d 备份 删除了所有文件,从测试机192..168.59.128上同步过来 一直报错 已加载 ...

  10. WPF 列表自动换行

    原文:WPF 列表自动换行 本文告诉大家如何在 ListView 或 ListBox 使用 WrapPanel 让里面的控件自动换行 在 WPF 可以通过修改 ItemsPanel 设置使用不同的 I ...