À propos du chargement de plus de code en bas de la vue

Cet article vous présente comment charger davantage au bas de Vue à travers un exemple de code. Le code est simple et facile à comprendre, très bon et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

L'effet à obtenir est le suivant :

<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>

Ce qui précède est tout le contenu de cet article I. j'espère que cela sera utile à l'étude de tout le monde. Plus de contenu connexe Veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos des idées d'implémentation de l'ajout de la fonction d'écran de verrouillage dans le projet Vue

Comment vue implémente l'actualisation avant et retour L'effet de ne pas rafraîchir

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!