项目手机端分页跳转不理想，自己做了一个滚动加载的一个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. （转载）JS与WebView交互存在的一些问题

    JS与WebView交互存在的一些问题 作者 隔壁的李小宝 关注 2015.06.09 19:30 字数 2896 阅读 11117评论 3喜欢 35 一.背景概述 2013年Android平台暴露出 ...

  2. MySQL学习(六)——自定义连接池

    1.连接池概念 用池来管理Connection,这样可以重复使用Connection.有了池,我们就不用自己来创建Connection,而是通过池来获取Connection对象.当使用完Connect ...

  3. 视图层 view

    视图层是 Django 处理请求的核心代码层,我们大多数 Python 代码都集中在这一层面.它对外接收用户请求,对内调度模型层和模版层,统合数据库和前端,最后根据业务逻辑,将处理好的数据,与前端结合 ...

  4. Python3+Gurobi使用教程(一)

    Gurobi使用教程 1.Gurobi使用的一般框架 from gurobipy import * try: m=Model('modelname') except GurobiError: prin ...

  5. OCUI界面设计：滚动视图与分页控件初探

    滚动视图(UIScrollView) 简单介绍 1.UIScrollView滚动视图能够排列并显示超出自身显示范围的内容. 2.UIScrollView内部整合了多种手势来达到丰富的界面展示效果. 3 ...

  6. weblogic 生产模式和开发模式的互相转换

    weblogic 生产模式和开发模式的互相转换 学习了:http://blog.csdn.net/qew110123/article/details/45845935 weblogic10.3生产模式 ...

  7. Android图片旋转,缩放,位移,倾斜,对称完整演示样例(一)——imageView.setImageMatrix(matrix)和Matrix

    MainActivity例如以下: import android.os.Bundle; import android.view.MotionEvent; import android.view.Vie ...

  8. tomcat怎样禁止显示文件夹和文件列表

    查看原文:http://www.ibloger.net/article/300.html Tomcat禁止显示文件夹和文件列表 打开   tomcat的安装文件夹/conf/web.xml 文件 &l ...

  9. vim水平摆放全部窗体的三个方法

    Method1: map <F7> <ESC>:windo exe "normal \<foobar<C-W>C-W>K"<C ...

  10. 关于oracle db 11gR2版本号上的_external_scn_rejection_threshold_hours參数和scn headroom补丁问题

    关于oracle db 11gR2版本号上的_external_scn_rejection_threshold_hours參数和scn headroom补丁问题 来自于: Installing, Ex ...