当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue中实现滚动加载更多的示例

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

在以前的前端刀耕火种时代要实现滚动加载更多想要大家都是很快实现了，在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，还有更好的解决办法大家自行补充。

以上这篇vue中实现滚动加载更多的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网