快捷導(dǎo)航

vue中實(shí)現(xiàn)滾動加載更多的示例

更新時間：2017年11月08日 10:24:21 作者：土家稀哥

下面小編就為大家?guī)硪黄獀ue中實(shí)現(xiàn)滾動加載更多的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

在以前的前端刀耕火種時代要實(shí)現(xiàn)滾動加載更多想要大家都是很快實(shí)現(xiàn)了，在vue會有一點(diǎn)麻煩，最近自己研究了一下，做了一個簡單的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;
      // 設(shè)置一個開關(guān)來避免重負(fù)請求數(shù)據(jù)
      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);
          // 將得到的數(shù)據(jù)放到vue中的data
          _this.articles = JSON.parse(response.data).stories;
        })
        .catch(function(error){
          console.log(error);
        });

      // 注冊scroll事件并監(jiān)聽
      window.addEventListener('scroll',function(){
        // console.log(document.documentElement.clientHeight+'-----------'+window.innerHeight); // 可視區(qū)域高度
        // console.log(document.body.scrollTop); // 滾動高度
        // console.log(document.body.offsetHeight); // 文檔高度
        // 判斷是否滾動到底部
        if(document.body.scrollTop + window.innerHeight >= document.body.offsetHeight) {
          // console.log(sw);
          // 如果開關(guān)打開則加載數(shù)據(jù)
          if(sw==true){
            // 將開關(guān)關(guān)閉
            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));
                // 將新獲取的數(shù)據(jù)push到vue中的data，就會反應(yīng)到視圖中了
                JSON.parse(response.data).stories.forEach(function(val,index){
                  _this.articles.push(val);
                  // console.log(val);
                });
                // 數(shù)據(jù)更新完畢，將開關(guān)打開
                sw = true;
              })
              .catch(function(error){
                console.log(error);
              });  
          }
        }
      });
    }
  }
</script>
<style lang="less">
  *{
    margin:0;
    padding:0;
  }
  li{
    list-style:none;
  }
</style>

大致效果如下