vue 에서 스크롤 로 딩 더 많은 예제 구현

예전 의 전단 화전 시대 에 스크롤 로드 를 실현 하려 면 더 많은 것 을 실현 해 야 합 니 다.모두 가 빨리 실현 하고 싶 습 니 다.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 에서 스크롤 로 딩 을 실현 하 는 더 많은 예 는 바로 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.