php 拉到底部加载更多,vue 实现滚动到页面底部开始加载更多

最新推荐文章于 2021-04-10 14:00:16 发布

楽楽Sukia

最新推荐文章于 2021-04-10 14:00:16 发布

阅读量142

点赞数

文章标签： php 拉到底部加载更多

直接上代码：

{{item.title}}

import axios from 'axios';

export default {

data () {

return {

newsList: [],

date: [],

todayDate: '',

REQUIRE: true,

loading: false,

tips: '努力加载中...'

}

created () {

// 获取今日新闻

axios.get('http://zhihuapi.herokuapp.com/api/4/news/latest')

.then( (res) => {

this.newsList.push(res.data['stories'])

this.date.push(res.data['date']);

this.todayDate = res.data['date']

})

mounted () {

// 添加滚动事件，检测滚动到页面底部

window.addEventListener('scroll', this.scrollBottom)

methods: {

scrollBottom() {

// 滚动到页面底部时，请求前一天的文章内容

if (((window.screen.height + document.body.scrollTop) > (document.body.clientHeight)) && this.REQUIRE) {

// 请求的数据未加载完成时，滚动到底部不再请求前一天的数据

this.REQUIRE = false;

this.loading = true;

this.tips = '努力加载中...';

axios.get('http://zhihuapi.herokuapp.com/api/4/news/before/' + this.todayDate).then((res) => {

this.newsList.push(res.data['stories']);

this.date.push(res.data['date']);

this.todayDate = res.data['date'];

// 请求的数据加载完成后，再次滚动到底部时，允许请求前一天数据

this.$nextTick(() => {

this.REQUIRE = true;

this.loading = false;

});

}).catch(() => {

this.tips = '连接失败，请稍后重试';

// 请求失败时，将 REQUIRE 置为 true，滚动到底部时，再次请求

this.REQUIRE = true;

});

}

showDay (index) {

if (index === 0) {

return '今日新闻'

} else {

return this.getToday(index)

}

getToday (index) {

let year = this.date[index].slice(0, 4);

let month = this.date[index].slice(4, 6);

let day = this.date[index].slice(6);

let today = new Date(year + '/' + month + '/' + day);

let week = ['日', '一', '二', '三', '四', '五', '六'];

return month + '月' + day + '日' + ' 星期' + week[today.getDay()];

attachImageUrl (srcUrl) {

if (srcUrl !== undefined) {

return 'http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=' + srcUrl.slice(0, 4) + srcUrl.slice(5);

}

Jquery鼠标滚动到页面底部自动加载更多内容,使用分页

index.php代码 [html] view plaincopy html PUBLIC ;} .single_item{padding: ...

Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页

1.index.php

当滚动条滚动到页面底部自动加载增加内容的js代码

这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

vue使用H5实现滚动到页面底部时加载数据

使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...

jQuery+ajax实现滚动到页面底部自动加载图文列表效果

h-cn">

UWP-ListView到底部自动加载更多数据

原文:UWP-ListView到底部自动加载更多数据 ListView绑定的数据当需要“更多”时自动加载 ListView划到底部后,绑定的ObservableCollection列表数据需要加载的更 ...

RecycleView 滑动到底部，加载更多

android.support.v7 包提供了一个新的组件:RecycleView,用以提供一个灵活的列表试图.显示大型数据集,它支持局部刷新.显示动画等功能,可以用来取代ListView与GridV ...

H5页面下拉加载更多(实用版)

近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有. 醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件还可以,但是 ...

随机推荐

python-study1 in hubei

1.安装好python后要配置环境变量(C:\Python27\Scripts---能找到pip.exe和easy_install.exe和C:\Python27---能找到python.exe) 2 ...

1&period;linux服务器的性能分析与优化

[教程主题]:1.linux服务器的性能分析与优化 [课程录制]: 创E [主要内容] [1]影响Linux服务器性能的因素操作系统级 CPU 目前大部分CPU在同一时间只能运行一个线程,超线程的处 ...

python练习程序(c100经典例10)

题目: 打印楼梯,同时在楼梯上方打印两个笑脸. print '..' for i in range(1,9): print '**' for j in range(1,i+1): print ' ',

Nth Digit | leetcode

Find the nth digit of the infinite integer sequence 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, ... Note: n i ...

jstat(JVM Statistics Monitoring Tool)

功能用于监视虚拟机各种运行状态信息的命令行工具.它可以显示本地或远程虚拟机进程中的类装载.内存.垃圾收集.JIT编译等运行数据,在没有GUI图形界面,只提供了纯文本控制台环境的服务器上,它将是运 ...

[Jobdu] 题目1521：二叉树的镜像

不知道怎么回事下面的代码通过了4个测试用例,还有1个测试用例始终是Runtime Error,各位帮我看一下是哪里出了问题镜像输出两种方法,一种是递归进行调整,另外一种就是直接在先序遍历的基础上进行 ...

JavaScript高级程序设计：第二十一章

第二十一章 Ajax与Comet 一.XMLHttpRequest对象 1.XHT的用法在使用XHR对象时,要调用的第一个方法时open( ),它接受3个参数:要发送的请求的类型.请求的URL和表示 ...

AJAX验证码检查

前言对于验证码检查我们并不会陌生,我们在学习Session的时候已经使用过了验证码检查了.详细可参考:http://blog.csdn.net/hon_3y/article/details/5479 ...

自己动手实现mybatis动态sql

发现要坚持写博客真的是一件很困难的事情,各种原因都会导致顾不上博客.本来打算写自己动手实现orm,看看时间,还是先实现一个动态sql,下次有时间再补上orm完整的实现吧. 用过mybatis的人,估计 ...

Python2&period;7&period;13下载安装全过程(Windows版)

前提: 我下载的Python是windows版本的,演示过程是在win10 64位操作系统上安装的. 1.下载进入官网https://www.python.org/,找到Dowdloads,根 ...