vue中实现滚动加载更多的示例
2019/6/27 20:34:18
本文主要是介绍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中实现滚动加载更多的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持找一找教程网。
这篇关于vue中实现滚动加载更多的示例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-19如何设置Vuex管理用户的登录和退出数据操作-icode9专业技术文章分享
- 2024-09-19如何给微信云函数下载package.json 中列出的所有依赖-icode9专业技术文章分享
- 2024-09-19Vue3全家桶资料:初学者入门教程与实战指南
- 2024-09-19Vue3资料:初学者快速入门指南
- 2024-09-19Vue资料:初学者必备的入门指南与实用资源
- 2024-09-19Vue3全家桶资料:初学者必备的入门教程与实践指南
- 2024-09-19Vue3 资料指南:快速入门与实战技巧
- 2024-09-19Vue资料指南:为初学者量身打造的前端框架入门教程
- 2024-09-19Vue3入门教程:快速启动与基本组件创建
- 2024-09-19Vue3学习:从零基础到实战的快速入门指南