最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

vue.js加载新的内容

来源:动视网 责编:小OO 时间:2020-11-27 20:19:50
文档

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>。
推荐度:
导读源码。<;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>。


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加载新的内容

源码。<;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>。
推荐度:
标签: 加载 加载的 vue.js
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top