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 正则替换 replace(regExp, function)用法
May 22 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
详解使用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对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
PHP解决中文乱码
2017/04/28 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
javascript时间函数大全
2014/06/30 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Python中你应该知道的一些内置函数
2017/03/31 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
关于Python错误重试方法总结
2021/01/03 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
房租涨价通知
2015/04/23 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Python selenium模拟网页点击爬虫交管12123违章数据
2021/05/26 Python
十大最强电系宝可梦,阿尔宙斯电系之一,第七被称为雷神
2022/03/18 日漫