關於vue底部加載更多的程式碼

本文透過實例代碼給大家介紹了vue底部加載更多,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下

要實現的效果如下：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於Vue專案中新增鎖定畫面功能的實作想法

##vue如何實作前進刷新後退不刷新的效果

#

以上是關於vue底部加載更多的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！