vue.js加载新的内容(实例代码)
程序员文章站
2023-11-14 19:30:22
vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法
源码：
vue是一种轻巧便捷的框架，那么如何进行对于数据加载的刷新呢？以下就是我对于vue.js数据加载的一点想法
源码：
<div @scroll="onscroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for="item in sitems"> <div @click="linkurl(item.code)"><img v-bind:src="item.publicimg"></div> </li> </ul> <div class="loading_wrap myload disn"> <p>加载中...</p> <i class="loading"></i> </div> </div>
解析：
$(function() {
var pagenum = 1;
var pagesize = 6;
vue = new vue({
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) {
var offsetheight = 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(var i = 0; i <= 1000; i++) {
this.rawitems.push(i)
}
}
})
})
以上所述是小编给大家介绍的vue.js加载新的内容(实例代码)，希望对大家有所帮助