重慶分公司
重慶分公司，新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
vue.js加載新的內容(實例代碼)
vue是一種輕巧便捷的框架，那么如何進行對于數據加載的刷新呢？以下就是我對于vue.js數據加載的一點想法
成都創新互聯是專業的淮上網站建設公司，淮上接單;提供成都網站建設、做網站,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行淮上網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!
源碼：
加載中...
解析：
$(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加載新的內容(實例代碼)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！
本文名稱：vue.js加載新的內容(實例代碼)
分享URL：http://www.xueling.net.cn/article/phoegc.html