vue是一種輕巧便捷的框架,那么如何進(jìn)行對于數(shù)據(jù)加載的刷新呢?以下就是我對于vue.js數(shù)據(jù)加載的一點想法

成都創(chuàng)新互聯(lián)是專業(yè)的淮上網(wǎng)站建設(shè)公司,淮上接單;提供成都網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行淮上網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!
源碼:
<div @scroll="onScroll($event)" > <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加載新的內(nèi)容(實例代碼),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持!
網(wǎng)站標(biāo)題:vue.js加載新的內(nèi)容(實例代碼)
分享URL:http://chinadenli.net/article12/phoegc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗、ChatGPT、外貿(mào)建站、全網(wǎng)營銷推廣、網(wǎng)頁設(shè)計公司、建站公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)