vue.js加载新的内容(实例代码)

vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法

成都创新互联是专业的淮上网站建设公司,淮上接单;提供成都网站建设、做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行淮上网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

源码:

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

网站标题:vue.js加载新的内容(实例代码)
分享URL:https://www.cdcxhl.com/article12/phoegc.html

成都网站建设公司_创新互联,为您提供用户体验ChatGPT外贸建站全网营销推广网页设计公司建站公司

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

成都网站建设公司