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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
斜45度寻路实现函数
Aug 20 Javascript
JS类的封装及实现代码
Dec 02 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
SeaJS入门教程系列之使用SeaJS(二)
Mar 03 Javascript
jquery实现弹出层效果实例
May 19 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
vue使用axios跨域请求数据问题详解
Oct 18 Javascript
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP操作文件的一些基本函数使用示例
2014/11/18 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
jquery 上下滚动广告
2009/06/17 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Django contenttypes 框架详解(小结)
2018/08/13 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
应届生保险求职信
2013/11/11 职场文书
物业公司采购员岗位职责
2013/12/31 职场文书
电大本科自我鉴定
2014/02/05 职场文书
成立公司计划书
2014/05/07 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
2016年学校招生广告语
2016/01/28 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
如何解决php-fpm启动不了问题
2021/11/17 PHP