> 웹 프론트엔드 > JS 튜토리얼 > vue.js가 새 콘텐츠를 로드합니다.

vue.js가 새 콘텐츠를 로드합니다.

巴扎黑
풀어 주다: 2017-06-26 15:02:51
원래의
1361명이 탐색했습니다.

vue는 가볍고 편리한 프레임워크인데 데이터 로딩을 새로 고치는 방법은 무엇입니까? 다음은 vue.js 데이터 로딩에 대한 내 생각입니다.

소스 코드:


  

      

  •   

      

  •   

  
  

로드 중...


   
  

분석:

$ (function() {
  var pageNum = 1;
  var pageSize = 6;
  vue = new Vue({
   el: '#app',
  data: {
  items: [],
   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( );   },
  close : function() {
    history.go(-1);
  },
   onScroll: function(event) {
    var offsetHeight = event.currentT arget.offsetHeight,
  scrollHeight = 이벤트 .target.scrollHeight,
  scrollTop = event.target .scrollTop,
   scrollBottom = offsetHeight + scrollTop;
   if(scrollBottom == scrollHeight+10 ||scrollBottom == scrollHeight) {
.pageNum == 수학.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가 새 콘텐츠를 로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿