vue中实现滚动加载更多
来源:互联网 发布:没文凭自学编程找工作 编辑:程序博客网 时间:2024/05/22 13:30
在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了,在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,还有更好的解决办法大家自行补充。
阅读全文
0 1
- vue中实现滚动加载更多
- vue 2 滚动条加载更多数据实现
- vue.js监听滚动条加载更多数据
- vue底部加载更多
- MVC中实现加载更多
- 滚动加载更多内容
- 滚动加载更多
- win8 metro 无限滚动加载数据,实现“更多”功能
- Js(JQuery)实现滚动到底部加载更多(翻页)
- Android无限滚动库mugen实现加载更多效果
- jquery weui实现多tab异步滚动加载更多
- vue上拉加载更多
- vue滚动自动加载
- UItableview中实现加载更多功能+++
- 滚动加载更多的代码
- jquery实现加载更多
- 加载更多功能实现
- RecyclerView实现加载更多
- VAO VBO IBO大乱炖
- Tiny4412 Android5.0 定制MTP显示的名字
- cocos2dx开发之搭建一个高效的调试环境(Android平台)
- Ubuntu中vim安装 YouCompleteMe插件
- Android设置Dialog的透明度
- vue中实现滚动加载更多
- Redis常用数据类型介绍、使用场景及其操作命令
- CONNECT BY理解
- Android线程—Volatile关键字(一)
- mxnet学习序列
- Java多线程之同步类容器与并发容器
- H264编码和解码的问题——b intra refresh
- spark-大表join优化方案
- MVVM