微客导航 » 文章资讯 » vue.js加载新的内容(实例代码)

vue.js加载新的内容(实例代码)

2024-02-21 16:04:03 191

vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法

源码：

0">

加载中...

解析：

$(function(){
varpageNum=1;
varpageSize=6;
vue=newVue({
el:'#app',
data:{
items:[],
pageNum:pageNum,
pageSize:pageSize,
rawItems:[],
sitems:[]
},
methods:{
getList:function(){
$.showLoading();
this.$http.get(store.list,{
pageNum:pageNum,
pageSize:pageSize
}).then(function(result){
$.removeLoading();
this.sitems=result.data.data.items;
},function(){
$.removeLoading();
$.showAlert({
'title':'提示',
'content':"页面偷懒了~~",
'sure':this.close
});
})
},
close:function(){
history.go(-1);
},
onScroll:function(event){
varoffsetHeight=event.currentTarget.offsetHeight,
scrollHeight=event.target.scrollHeight,
scrollTop=event.target.scrollTop,
scrollBottom=offsetHeight+scrollTop;
if(scrollBottom==scrollHeight+10||scrollBottom==scrollHeight){
if(this.pageNum==Math.ceil(this.rawItems.length/this.pageSize)){
return
}
this.pageNum++;
pageNum++;
$(".myload").removeClass("disn");
vue.$http.get(store.list,{
pageNum:pageNum,
pageSize:pageSize
}).then(function(result){
setTimeout(function(){
$(".myload").addClass("disn");
vue.sitems=vue.sitems.concat(result.data.data.items);
},2000)
},function(){
$(".myload").addClass("disn");
})
}
},
},
ready:function(){
this.getList();
for(vari=0;i<=1000;i++){
this.rawItems.push(i)
}
}
})
})

以上所述是小编给大家介绍的vue.js加载新的内容(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
3162201930
czq8825@qq.com

vue.js加载新的内容(实例代码)

热门推荐

随机推荐