189 8069 5689

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加载新的内容(实例代码)
网址分享:http://cdxtjz.cn/article/phoegc.html

其他资讯