vue.js加载新的内容(实例代码)
2017-06-01 15:02
736 查看
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.js上下滚动加载组件的实例代码
- Vue.js 点击按钮显示/隐藏内容的实例代码
- JS实例:网页上图片延迟加载的JS代码
- 模拟jQuery中的ready方法及实现按需加载css,js实例代码
- 动态加载js、css的实例代码
- Vue.js 点击按钮显示/隐藏内容 实例
- vue.js树形组件之删除双击增加分支实例代码
- JS实例:网页上图片延迟加载的JS代码
- [HTML/JS]利用JQuery的load函数动态加载其它页面的内容的实现代码代替Ifram
- Vue.js动态添加、删除选题的实例代码
- js点击文本框后才加载验证码实例代码
- js图片加载效果实例代码(延迟加载+瀑布流加载)
- JS复制内容到剪切板的实例代码(兼容IE与火狐)
- require.js 加载 vue组件 r.js 合并压缩的实例
- 在看官方的例子时候由一个grid实例,在每一行之前有个加号,展开可以显示内容,在实际应用中还是非常有用的,照搬例子的代码,发现老是提示对象不存在,查阅资料后发现是没有加载插件,这里和大家分享下Ext.grid.RowExpander插件的使用,
- JS图片根据鼠标滚动延时加载的实例代码
- 三种动态加载js的jquery实例代码另附去除js方法
- 当滚动条滚动到页面底部自动加载增加内容的js代码
- vue图片加载与显示默认图片实例代码
- vue.js实现仿原生ios时间选择组件实例代码