Shulou(Shulou.com)05/31 Report--

This article is a detailed introduction to "how to use vue to realize more functions at the bottom". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "how to use vue to realize more functions at the bottom" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of Xiaobian.

{{showDay(index)}} {{item.title}}

{{tips}} import axios from 'axios'; export default { data () { return { newsList: [], date: [], todayDate: '', REQUIRE: true, loading: false, tips: '努力加载中...' } }, created () { // 获取今日新闻 axios.get('http://zhihuapi.herokuapp.com/api/4/news/latest') .then( (res) => { this.newsList.push(res.data['stories']) this.date.push(res.data['date']); this.todayDate = res.data['date'] }) }, mounted () { // 添加滚动事件，检测滚动到页面底部 window.addEventListener('scroll', this.scrollBottom) }, methods: { scrollBottom() { // 滚动到页面底部时，请求前一天的文章内容 if (((window.screen.height + document.body.scrollTop) > (document.body.clientHeight)) && this.REQUIRE) { // 请求的数据未加载完成时，滚动到底部不再请求前一天的数据 this.REQUIRE = false; this.loading = true; this.tips = '努力加载中...'; axios.get('http://zhihuapi.herokuapp.com/api/4/news/before/' + this.todayDate).then((res) => { this.newsList.push(res.data['stories']); this.date.push(res.data['date']); this.todayDate = res.data['date']; // 请求的数据加载完成后，再次滚动到底部时，允许请求前一天数据 this.$nextTick(() => { this.REQUIRE = true; this.loading = false; }); }).catch(() => { this.tips = '连接失败，请稍后重试'; // 请求失败时，将 REQUIRE 置为 true，滚动到底部时，再次请求 this.REQUIRE = true; }); } }, showDay (index) { if (index === 0) { return '今日新闻' } 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 + '月' + day + '日' + ' 星期' + 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); } } } }读到这里，这篇"如何使用vue实现底部加载更多功能"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.