收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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

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

Vue.Draggable实现拖拽效果
快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下1.下载包:npminstallvuedraggable配置:package.json"dependencies":{"element-ui":"^1.3.4","less":"^2.7.2","less-load

Vue.js中兄弟组件之间互相传值实例
兄弟组件之间互相传值,需要建立一个中转站(新的vue实例),并且需要主动触发。实例上的$on方法来接受监听。!DOCTYPEhtmlhtmllang="en"headmetacharset="UTF-8"ti

详解vuejs几种不同组件(页面)间传值的方式
在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值。一、路由传值路由对象如下图所示:在跳转页面的时候,在js代码中的操

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号