vue中实现滚动加载更多的示例
时间:2019-04-08
本文章向大家介绍vue中实现滚动加载更多的示例,主要包括vue中实现滚动加载更多的示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了,在vue会有一点麻烦,最近自己研究了一下,做了一个简单的demo,供大家参考:
<template> <div> <ul> <li v-for="item in articles"> <h2>{{item.title}}</h2> <img :src="item.images" alt=""> </li> </ul> </div> </template> <script> import axios from 'axios'; export default{ data(){ return { articles : [] } }, mounted(){ // 缓存指针 let _this = this; // 设置一个开关来避免重负请求数据 let sw = true; // 此处使用node做了代理 axios.get('http://localhost:3000/proxy?url=http://news-at.zhihu.com/api/4/news/latest') .then(function(response){ // console.log(JSON.parse(response.data).stories); // 将得到的数据放到vue中的data _this.articles = JSON.parse(response.data).stories; }) .catch(function(error){ console.log(error); }); // 注册scroll事件并监听 window.addEventListener('scroll',function(){ // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可视区域高度 // console.log(document.body.scrollTop); // 滚动高度 // console.log(document.body.offsetHeight); // 文档高度 // 判断是否滚动到底部 if(document.body.scrollTop + window.innerHeight >= document.body.offsetHeight) { // console.log(sw); // 如果开关打开则加载数据 if(sw==true){ // 将开关关闭 sw = false; axios.get('http://localhost:3000/proxy?url=http://news.at.zhihu.com/api/4/news/before/20170608') .then(function(response){ console.log(JSON.parse(response.data)); // 将新获取的数据push到vue中的data,就会反应到视图中了 JSON.parse(response.data).stories.forEach(function(val,index){ _this.articles.push(val); // console.log(val); }); // 数据更新完毕,将开关打开 sw = true; }) .catch(function(error){ console.log(error); }); } } }); } } </script> <style lang="less"> *{ margin:0; padding:0; } li{ list-style:none; } </style>
大致效果如下
当然目前只是一个demo,还有更好的解决办法大家自行补充。
以上这篇vue中实现滚动加载更多的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- nyoj------擅长排列的小明
- HDUOJ-------(1211)RSA
- HDUOJ----1301 Jungle Roads
- try语句...
- HDUOJ---1233还是畅通工程
- HDUOJ---1863畅通工程
- HDUOJ---1879 继续畅通工程
- MySQL命令行工具:percona-toolkit安装使用初探
- 解决Nginx配置http2不生效,谷歌浏览器仍然采用http1.1协议问题
- 海量数据切分抽取的实践场景(r11笔记第43天)
- 使用shell自动化诊断性能问题(一)(r11笔记第41天)
- Data Guard实现故障自动切换(二)(r11笔记第40天)
- Oracle Data Guard延迟的原因(r11笔记第69天)
- 一个细小的空间问题触发的报警(r11笔记第68天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法