Maison > interface Web > js tutoriel > vue.js charge du nouveau contenu

vue.js charge du nouveau contenu

巴扎黑
Libérer: 2017-06-26 15:02:51
original
1350 Les gens l'ont consulté

Vue est un framework léger et pratique, alors comment actualiser le chargement des données ? Voici mes réflexions sur le chargement des données vue.js

Code source :


  

      

  •    

      
  • >  

  

  

Chargement...


  
|
var pageSize = 6;
vue = new Vue({

el: '#app',

data: {

items: [],

pageNum : pageNum,
pageSize : pageSize,
rawItems : [],
sitems :[]
},
méthodes : {
getList : function() {
$.showLoading ();
This.$http.get(store.list, {
pageNum : pageNum,
pageSize : pageSize
}).then(function(result) {
();
    this.sitems = result.data.data.items;
   }, function() {
     $.removeLoading( ,
'content': "La page est paresseux~~",
'sure': this.close
{
    history.go(-1);
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) {
setTime out(function () {
      $(".myload").addClass("disn" );
      vue.sitems = vue.sitems.concat(result.data.data.items);
     }, 2000)
}, Function () {
$ (". MyLoad") . Addclass ("DISN");
})
}
},
,
prêt : function() {
   this.getList();
   for(var je = 0; je <= 1000; i++) {
     this.rawItems.push(i)
   }
  }
 })
})

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal