您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue如何實現(xiàn)底部加載更多功能”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“vue如何實現(xiàn)底部加載更多功能”吧!
實現(xiàn)代碼如下:
<template> <div class="newsList"> <div v-for="(items, index) in newsList"> <div class="date">{{showDay(index)}}</div> <div 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> </div> </div> <div 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> </div> </div> </template> <script> 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() { // 滾動到頁面底部時,請求前一天的文章內(nèi)容 if (((window.screen.height + document.body.scrollTop) > (document.body.clientHeight)) && this.REQUIRE) { // 請求的數(shù)據(jù)未加載完成時,滾動到底部不再請求前一天的數(shù)據(jù) 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']; // 請求的數(shù)據(jù)加載完成后,再次滾動到底部時,允許請求前一天數(shù)據(jù) 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); } } } } </script>
Vue具體輕量級框架、簡單易學、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗。
到此,相信大家對“vue如何實現(xiàn)底部加載更多功能”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。