PHP结合Vue实现上拉分页
效果图:
<?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实现上拉分页的更多相关文章
- Qt qml listview 列表视图控件(下拉刷新、上拉分页、滚动轴)
Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果] [功能] 下拉刷新 ...
- vue mpvue 上拉加载更多示例代码
vue 上拉加载更多示例代码 可以比较简单的改为 mpvue , 去除滚动判断,直接放在 onReachBottom 周期即可. html <div id="app"> ...
- vue loadMore 上拉刷新不能实现的坑
1.如果你写的代码没问题,但依然不能实现上拉刷新效果,那你有可能是缺少了overflow: scroll 2.如果上拉刷新一直在加载状态,需要调用this.$refs.loadmore.onBotto ...
- 13 Flutter仿京东商城项目 商品列表筛选以及上拉分页加载更多
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- 12 Flutter仿京东商城项目 商品列表页面请求数据、封装Loading Widget、上拉分页加载更多
ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...
- Vue+jquery上拉加载
<ul> <li class="new-list" v-for="item in proarr"> <a :href=" ...
- Ionic4.x ion-infinite-scroll 上拉分页加载更多
<ion-header> <ion-toolbar> <ion-title> Tab One </ion-title> </ion-toolbar ...
- 移动端使用mint-ui loadmore实现下拉刷新上拉显示更多
前序:在使用vue做一个h5项目的时候,需要上拉分页加载,实践中总结一下: 首先要安装mint-ui npm i mint-ui -S 然后引入,一般在main.js里面 import Vue fro ...
- 一个简单的适用于Vue的下拉刷新,触底加载组件
一个简单的适用于Vue的上拉刷新,触底加载组件,没有发布npm需要时直接粘贴定制修改即可 <template> <div class="list-warp-template ...
随机推荐
- python web框架介绍对比
Django Python框架虽然说是百花齐放,但仍然有那么一家是最大的,它就是Django.要说Django是Python框架里最好的,有人同意也有人 坚决反对,但说Django的文档最完善.市场占 ...
- 【Linux】-NO.8.Linux.4.Command.1.001-【Common Command】-
1.0.0 Summary Tittle:[Linux]-NO.8.Linux.4.Command.1.001-[Common Command]- Style:Linux Series:Command ...
- Swagger Editor Linux安装(全新环境)
查看内核版本 cat /proc/version cat /etc/redhat-release 查看系统是32位还是64位方法总结getconf LONG_BIT 安装相关工具 yum instal ...
- 【LeetCode每天一题】Pow(x, n)(平方)
Implement pow(x, n), which calculates x raised to the power n (x,n). Example 1: Inpu ...
- HTop依赖包
htop 是一个 Linux 下的交互式的进程浏览器,可以用来替换Linux下的top命令. 1.安装HTop时需要先安装依赖包:rpmforge-release-0.5.3-1.el6.rf.x86 ...
- android怎么抓取双向认证https的包
这里仅提供思路. 第一种方法: dex层面,可以直接用插日志方法,找到app使用的https库,这里以某app为例,使用okhttp, okhttp收发包相关代码: Request request = ...
- phpstudy的使用
1.第一步是下载phpstudy,你可以百度去下载,也可以通过下面我分享的网盘下载 链接:https://pan.baidu.com/s/1E_CXIrKv1N-jrlA4KCovZA 密码:mkx9 ...
- c3p0:Connections could not be acquired from the underlying database!解决方案
在利用ssh框架做网站的时候遇到了一个比较棘手的问题,一直连接不上数据库,问题描述如下: 各种百度然后说的最多的解决方案是: 1,驱动配置有误:2,数据库连接地址有误:3,密码或帐号有误: 4,数据库 ...
- HttpServletRequest常用方法
1.获取客户机信息 getRequestURL:该方法返回客户端发出请求时的完整URL getRequestURI:该方法返回请求行中的资源名部分 getQueryString:该方法返回请求中的参数 ...
- XML小结
一.因为某些字符在xml格式中,具有特殊意义,所以当我们需要使用它本身的意思的时候,就要用其他东西来代替它,否则会产生错误 < < less than > > greater ...