Rumah > hujung hadapan web > tutorial js > 关于vue底部加载更多的代码

关于vue底部加载更多的代码

不言
Lepaskan: 2018-06-30 16:43:45
asal
1872 orang telah melayarinya

本文通过实例代码给大家介绍了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>
Salin selepas log masuk

以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

相关推荐:

关于Vue项目中添加锁屏功能的实现思路

vue如何实现前进刷新后退不刷新的效果

Atas ialah kandungan terperinci 关于vue底部加载更多的代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan