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


Posted in Javascript onJune 01, 2017

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

Javascript 相关文章推荐
Javascript与flash交互通信基础教程
Aug 07 Javascript
jQuery 获取对象 定位子对象
May 31 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
基于element-ui封装可搜索的懒加载tree组件的实现
May 22 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 #Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
Jun 01 #Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 #Javascript
Angularjs验证用户输入的字符串是否为日期时间
Jun 01 #Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 #jQuery
jquery网页加载进度条的实现
Jun 01 #jQuery
BootStrap selectpicker后台动态绑定数据
Jun 01 #Javascript
You might like
操作Oracle的php类
2006/10/09 PHP
PHP随机字符串生成代码(包括大小写字母)
2013/06/24 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
js截取中英文字符串、标点符号无乱码示例解读
2014/04/17 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
Bootstrap导航中表单简单实现代码
2017/03/06 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
VUE脚手架具体使用方法
2019/05/20 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue element upload实现图片本地预览
2019/08/20 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
[52:57]2014 DOTA2国际邀请赛中国区预选赛 LGD-CDEC VS HGT
2014/05/21 DOTA
[01:49]一目了然!DOTA2DotA快捷操作对比第二弹
2014/05/16 DOTA
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
基于django传递数据到后端的例子
2019/08/16 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
园林设计师自荐信
2013/11/18 职场文书
驾驶员岗位职责
2014/01/29 职场文书
护理专业自我鉴定
2014/01/30 职场文书
画展邀请函
2015/01/31 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL