vue中实现滚动加载更多的示例


Posted in Javascript onNovember 08, 2017

在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了,在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>

大致效果如下

vue中实现滚动加载更多的示例

当然目前只是一个demo,还有更好的解决办法大家自行补充。

以上这篇vue中实现滚动加载更多的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
js实现照片墙功能实例
Feb 05 Javascript
js实现消息滚动效果
Jan 18 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 #Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 #Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 #Javascript
thinkjs 文件上传功能实例代码
Nov 08 #Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
在React 组件中使用Echarts的示例代码
Nov 08 #Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 #Javascript
You might like
9个PHP开发常用功能函数小结
2011/07/15 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP实现类似于C语言的文件读取及解析功能
2017/09/01 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
什么是PHP7中的孤儿进程与僵尸进程
2019/04/14 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
最佳JS代码编写的14条技巧
2011/01/09 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
基于vue2.0动态组件及render详解
2018/03/17 Javascript
使用apifm-wxapi快速开发小程序过程详解
2019/08/05 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python 通过文件夹导入包的操作
2020/06/01 Python
Python 操作 MySQL数据库
2020/09/18 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
新学期家长寄语
2014/01/19 职场文书
2015年元旦活动总结
2014/05/09 职场文书
会计专业毕业生自荐书
2014/06/25 职场文书
小学课外阅读总结
2014/07/09 职场文书
合伙开公司协议书范本
2014/10/28 职场文书
群众路线调研报告范文
2014/11/03 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
Java基础-封装和继承
2021/07/02 Java/Android
MySQL索引失效场景及解决方案
2022/07/23 MySQL