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(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
jquery 简单图片导航插件jquery.imgNav.js
Mar 17 Javascript
JavaScript执行效率与性能提升方案
Dec 21 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
详解vue-resource promise兼容性问题
Jun 20 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
Javascript confirm多种使用方法解析
Sep 25 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
PHP Mysql编程之高级技巧
2008/08/27 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
2017/05/15 PHP
使用jQuery轻松实现Ajax的实例代码
2010/08/16 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
JS实现获取当前URL和来源URL的方法
2016/08/24 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
详解在express站点中使用ejs模板引擎
2017/09/21 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Django通过json格式收集主机信息
2020/05/29 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
求职信格式范本
2013/11/15 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
社区反邪教工作方案
2014/06/16 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
迎国庆横幅标语
2014/10/08 职场文书
2015年少先队活动总结
2015/03/25 职场文书
行政人事主管岗位职责
2015/04/11 职场文书