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加载新的内容(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！