Scroll to the bottom of the page vue realization starts to load more

Directly on the code:

<template>
  <div class="newsList">
    <div v-for="(items, index) in newsList">
      <div class="date">{{showDay(index)}}</div>
      <div class="list" >
        <ul>
          <li class="list-item" v-for="item in items">
            <span class="text">{{item.title}}</span>
            <img :src="attachImageUrl(item.images[0])" class="image"/>
          </li>
        </ul>
      </div>
    </div>
    <div class="infinite-scroll" v-show="loading">
      <svg class="loader-circular" viewBox="25 25 50 50">
        <circle class="loader-path" cx="50" cy="50" r="20" fill="none" stroke="rgb(53, 157, 218)" stroke-width="5"></circle>
      </svg>
      <span class="infinite-scroll-text">{{tips}}</span>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data () {
      return {
        newsList: [],
        date: [],
        todayDate: '',
        REQUIRE: true,
        loading: false,
    },
      }'efforts Loading ...'
        Tips:
    the Created () { 
      // get the news today 
      axios.get ( 'http://zhihuapi.herokuapp.com/api/4/news/latest' )
        .then ((RES) => {
         the this .newsList.push (res.data [ 'Stories' ])
         the this .date.push (res.data [ 'DATE' ]);
         the this .todayDate res.data = [ 'DATE' ] 
      }) 
    }, 
    Mounted () { 
      // add a scroll event, the scroll detection to the bottom of the page 
      window.addEventListener ( 'scroll', the this .scrollBottom) 
    }, 
    Methods: { 
      scrollBottom () { 
        // day scroll to the bottom, before requesting the content of the article 
        if (((window.screen.height + document.body.scrollTop)> (document.body.clientHeight)) && the this .REQUIRE) {
           // request data is completed is not loaded, the day before the rolling in the end portion of the data request is no longer 
          the this .REQUIRE = to false ;
           the this .loading = to true ;
           the this .tips = 'efforts loading ...' ; 
          axios.get ( 'http://zhihuapi.herokuapp.com/api/4/news/before/' + the this .todayDate) .then ((RES) => {
             the this .newsList.push (res.data [ 'Stories' ]);
           the this .date.push (res.data [ 'DATE' ]);
           the this .todayDate RES = .data [ 'date'];
           // the request data is loaded, when scrolling in the end portion again, allowing one day before the data request 
          the this $ nextTick (() =>. {
            this .REQUIRE = to true ;
             the this .loading = to false ; 
          }); 
        }). The catch (() => {
             the this .tips = 'connection failed, please try again later' ;
           // when request fails REQUIRE set to true, the rolling unit in the end, again requesting 
          the this .REQUIRE = to true ; 
        }); 
        } 
      }, 
      showDay (index) { 
        IF (index === 0 ) {
           return 'today's News'
        } else {
          return this.getToday(index)
        }
      },
      getToday (index) {
        let year = this.date[index].slice(0, 4);
        let month = this.date[index].slice(4, 6);
        let day = this.date[index].slice(6);
        let today = new Date(year + '/' + month + '/' + day);
        let week = ['日', '一', '二', '三', '四', '五', '六'];
        return month + 'May '+ day +' Day '+' week '+ week[today.getDay()];
      },
      attachImageUrl (srcUrl) {
        if (srcUrl !== undefined) {
          return 'http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=' + srcUrl.slice(0, 4) + srcUrl.slice(5);
        }
      }
    }
  }
</script>