About loading more code at the bottom of vue

This article introduces you to loading more at the bottom of vue through example code. The code is simple and easy to understand, very good, and has certain reference value. Friends in need can refer to it

The effect to be achieved is as follows:

<template>
 <p class="newsList">
  <p v-for="(items, index) in newsList">
   <p class="date">{{showDay(index)}}</p>
   <p 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>
   </p>
  </p>
  <p 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>
  </p>
 </p>
</template>
<script>
 import axios from &#39;axios&#39;;
 export default {
  data () {
   return {
    newsList: [],
    date: [],
    todayDate: &#39;&#39;,
    REQUIRE: true,
    loading: false,
    tips: &#39;努力加载中...&#39;
   }
  },
  created () {
   // 获取今日新闻
   axios.get(&#39;http://zhihuapi.herokuapp.com/api/4/news/latest&#39;)
    .then( (res) => {
    this.newsList.push(res.data[&#39;stories&#39;])
    this.date.push(res.data[&#39;date&#39;]);
    this.todayDate = res.data[&#39;date&#39;]
   })
  },
  mounted () {
   // 添加滚动事件，检测滚动到页面底部
   window.addEventListener(&#39;scroll&#39;, this.scrollBottom)
  },
  methods: {
   scrollBottom() {
    // 滚动到页面底部时，请求前一天的文章内容
    if (((window.screen.height + document.body.scrollTop) > (document.body.clientHeight)) && this.REQUIRE) {
     // 请求的数据未加载完成时，滚动到底部不再请求前一天的数据
     this.REQUIRE = false;
     this.loading = true;
     this.tips = &#39;努力加载中...&#39;;
     axios.get(&#39;http://zhihuapi.herokuapp.com/api/4/news/before/&#39; + this.todayDate).then((res) => {
      this.newsList.push(res.data[&#39;stories&#39;]);
     this.date.push(res.data[&#39;date&#39;]);
     this.todayDate = res.data[&#39;date&#39;];
     // 请求的数据加载完成后，再次滚动到底部时，允许请求前一天数据
     this.$nextTick(() => {
      this.REQUIRE = true;
      this.loading = false;
     });
    }).catch(() => {
      this.tips = &#39;连接失败，请稍后重试&#39;;
     // 请求失败时，将 REQUIRE 置为 true，滚动到底部时，再次请求
     this.REQUIRE = true;
    });
    }
   },
   showDay (index) {
    if (index === 0) {
     return &#39;今日新闻&#39;
    } 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 + &#39;/&#39; + month + &#39;/&#39; + day);
    let week = [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;];
    return month + &#39;月&#39; + day + &#39;日&#39; + &#39; 星期&#39; + week[today.getDay()];
   },
   attachImageUrl (srcUrl) {
    if (srcUrl !== undefined) {
     return &#39;http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl=&#39; + srcUrl.slice(0, 4) + srcUrl.slice(5);
    }
   }
  }
 }
</script>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. Please pay attention to more related content. PHP Chinese website!

Related recommendations:

About the implementation ideas of adding lock screen function in Vue project

How vue implements forward refresh and backward The effect of not refreshing

The above is the detailed content of About loading more code at the bottom of vue. For more information, please follow other related articles on the PHP Chinese website!