Flask接口签名sign原理与实例代码浅析
301
2023-01-27
vue底部加载更多的实例代码
要实现的效果如下:
{{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']http://;
// 请求的数据加载完成后,再次滚动到底部时,允许请求前一天数据
this.$nextTick(() => {
this.REQUIRE = true;
this.loading = false;
});
}).catch(() => {
this.tips = '连接失败,请稍后重试';
// 请求失败时http://,将 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底部加载更多的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~