效果图：





<?php

if(isset($_GET['data'])){

    $data = [

        [  'title'=>1], [  'title'=>2], [  'title'=>3],

        [  'title'=>4], [  'title'=>5], [  'title'=>6],

    ];

    echo json_encode($data);die;

}

?>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" charset="utf-8"></script>

<script src="https://cdn.bootcss.com/vue/2.3.0/vue.min.js" charset="utf-8"></script>

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

<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 = "?data=1"

                    $.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 > 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>


												


											
PHP结合Vue实现上拉分页的更多相关文章
	

    
								
  1. Qt qml listview 列表视图控件（下拉刷新、上拉分页、滚动轴）
		
    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 下拉刷新 ...
    
		
    2. 
						
  2. vue mpvue 上拉加载更多示例代码
		
    vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...
    
		
    3. 
						
  3. vue loadMore 上拉刷新不能实现的坑
		
    1.如果你写的代码没问题,但依然不能实现上拉刷新效果,那你有可能是缺少了overflow: scroll 2.如果上拉刷新一直在加载状态,需要调用this.$refs.loadmore.onBotto ...
    
		
    4. 
						
  4. 13 Flutter仿京东商城项目 商品列表筛选以及上拉分页加载更多
		
    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
    
		
    5. 
						
  5. 12 Flutter仿京东商城项目 商品列表页面请求数据、封装Loading Widget、上拉分页加载更多
		
    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
    
		
    6. 
						
  6. Vue+jquery上拉加载
		
    <ul> <li class="new-list" v-for="item in proarr"> <a :href=" ...
    
		
    7. 
						
  7. Ionic4.x  ion-infinite-scroll 上拉分页加载更多
		
    <ion-header> <ion-toolbar> <ion-title> Tab One </ion-title> </ion-toolbar ...
    
		
    8. 
						
  8. 移动端使用mint-ui loadmore实现下拉刷新上拉显示更多
		
    前序:在使用vue做一个h5项目的时候,需要上拉分页加载,实践中总结一下: 首先要安装mint-ui npm i mint-ui -S 然后引入,一般在main.js里面 import Vue fro ...
    
		
    9. 
						
  9. 一个简单的适用于Vue的下拉刷新，触底加载组件
		
    一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Centos7配置JAVA_HOME
			
    Centos7配置JAVA_HOME http://blog.csdn.net/zzpzheng/article/details/73613838 在Centos7上,通过yum install ja ...
    
			
    2. 
						
  2. 实习培训——Java异常处理（8）
			
    实习培训——Java异常处理(8) Java 异常处理 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 比如说,你的代码少了一个分号,那么运行出来结果是提示是错误 j ...
    
			
    3. 
						
  3. 左右两栏div布局，高度自适应
			
    页面结构如下: <div class="container"> <div class="left"> left </div> ...
    
			
    4. 
						
  4. Entity Framework（Fluent API）
			
    一.概述 Fluent API 可以理解为一种从POCO到数据库的映射约定,包括字段长度,类型,主外键等等,在EF Code First进行开发时候经常用到. 1.主键 modelBuilder.En ...
    
			
    5. 
						
  5. 延期版本webstorm（解决许可证过期，注册，激活，破解，码，支持正版，最新可用）
			
    很多人都发现 http://idea.lanyus.com/ 不能激活了 很多帖子说的 http://15.idea.lanyus.com/ 之类都用不了了 选择 License server (20 ...
    
			
    6. 
						
  6. UGUI之Scrollbar使用
			
    这个效果主要用到了3个组件(对象): 1:Scrollbar对象  滚动条 2:Scroll Rect组件  让对象具有滑动效果 3:Mask组件  遮罩层.把多余的部分隐藏不显示 Scrollbar ...
    
			
    7. 
						
  7. SQLite之C#连接SQLite
			
    SQLite是一个开源.免费的小型的Embeddable RDBMS(关系型数据库),用C实现,内存占用较小,支持绝大数的SQL92标准,现在已变得越来越流行,它的体积很小,被广泛应用于各种不同类型的 ...
    
			
    8. 
						
  8. PHP判断ip地址是否合法
			
    1.获取真正ip地址 function get_ip(){ //判断服务器是否允许$_SERVER if(isset($_SERVER)){ if(isset($_SERVER[HTTP_X_FORW ...
    
			
    9. 
						
  9. SpringMVC.入门篇.一.HelloWorld
			
    SpringMVC.入门篇<一>HelloWorld 项目包结构如下: HelloController.java 代码 package com.charles.controller; im ...
    
			
    10. 
						
  10. LeetCode11.盛最多水的容器
			
    给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...
    
			
    11.