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

 更新时间:2017年06月01日 15:02:30   作者:青苹果的幻想  
vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于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加载新的内容(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 解决el-date-picker日期选择控件少一天的问题

    解决el-date-picker日期选择控件少一天的问题

    这篇文章主要介绍了解决el-date-picker日期选择控件少一天的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue使用vue-cli快速创建工程

    vue使用vue-cli快速创建工程

    这篇文章主要介绍了vue使用vue-cli快速创建工程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue实现websocket客服聊天功能

    vue实现websocket客服聊天功能

    这篇文章主要为大家详细介绍了vue实现websocket客服聊天功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue中设置背景图片和透明度的简单方法

    Vue中设置背景图片和透明度的简单方法

    在做项目的时候常需要设置背景图片和透明度,下面这篇文章主要给大家介绍了关于Vue中设置背景图片和透明度的简单方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • 详解Vue开发微信H5微信分享签名失败问题解决方案

    详解Vue开发微信H5微信分享签名失败问题解决方案

    这篇文章主要介绍了详解Vue开发微信H5微信分享签名失败问题解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • vue-cropper组件实现图片切割上传

    vue-cropper组件实现图片切割上传

    这篇文章主要为大家详细介绍了vue-cropper组件实现图片切割上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • vue项目如何删除无用的依赖详解

    vue项目如何删除无用的依赖详解

    vue是目前非常流行的前端开发框架,随着技术的不断更新,我们也需要更新我们的vue项目,这篇文章主要给大家介绍了关于vue项目如何删除无用的依赖的相关资料,需要的朋友可以参考下
    2024-09-09
  • Vue安装与使用

    Vue安装与使用

    Vue是一套用于构建前后端分离的框架。刚开始是由国内优秀选手尤雨溪开发出来的,目前是全球“最”流行的前端框架。使用vue开发网页很简单,并且技术生态环境完善,社区活跃,是前后端找工作必备技能!下面来看看其得安装及使用方法吧
    2021-10-10
  • vue中的input框点击后不聚焦问题

    vue中的input框点击后不聚焦问题

    这篇文章主要介绍了vue中的input框点击后不聚焦问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中动态渲染数据时使用$refs无效的解决

    vue中动态渲染数据时使用$refs无效的解决

    这篇文章主要介绍了vue中动态渲染数据时使用$refs无效的解决方案,具有很好的参考价值。希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01

最新评论