vue实现ajax滚动下拉加载,同时具有loading效果(推荐)


Posted in Javascript onJanuary 11, 2017

代码如下所示:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>vue测试ajax的使用</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
*{ padding:0; margin:0}
.list ul li{padding:10px 5px 10px 10px;overflow:hidden;zoom:1;position:relative;border-bottom:1px solid #e8e8e8;}
.list ul li .img{margin-right:10px;display:block;width:60px;float:left;}
.list ul li img{width:60px;height:60px;border-radius:8px;}
.list ul li p{-webkit-box-flex:1;color:#777;overflow:hidden;padding-right:70px;}.list ul li p em{margin:7px 0;}
.list ul li p a{display:block;height:16px;line-height:16px;overflow:hidden;font-size:15px;}
.list ul li p span{display:block;line-height:16px;height:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:12px "\5FAE\8F6F\96C5\9ED1";}
.list ul li p u{margin:0 6px;padding:0 6px;border-left:1px solid #d9d9d9;border-right:1px solid #d9d9d9;}
.list ul li .btn {width: 40px;height: 25px;padding-top: 35px;color: #65bb0a;line-height:25px;text-align:center;background: none;position:absolute;right:5px; top:12px}
.list ul li .btn .bg {position: absolute;left: 0;top: 0;display: inline-block;width: 100%;height: 30px;repeat;background-size: 26px auto;}
.get-more,.loading{display:block;padding:15px 0; line-height:16px;text-align:center;font-size:14px;}
.loading{width:75px; margin:0 auto; background:url(imgs/loading.gif) 0 center no-repeat; padding-left:15px; background-size:13px auto}
</style>
</head>
<body>
<div class="list" id="app" v-scroll="getMore">
 <ul>
 <li v-for="item in games">
  <a v-bind:href="item.url" class="img"><img v-bind:src="item.img"></a>
  <p>
  <a v-bind:href="item.url">{{item.title}}</a>
  <em class="lstar4"></em>
  <span>{{item.server}}<u>39.9M</u>v2.1.3</span>
  </p>
  <a v-bind:href="item.url" class="btn"><em class="bg"></em>下载</a>
 </li>
 </ul>
 <div>
 <p class="get-more" v-on:click="getMore()" v-show="switchShow">点击加载更多</p>
 <p class="loading" v-show="!switchShow">加载中...</p>
 </div>
</div>
<script src="js/vue.js"></script>
<script src="http://cdn.bootcss.com/vue-resource/1.0.3/vue-resource.min.js"></script>
<!--<script src="http://211.149.193.19:8090/vue-tutorials/04.OAuth/jquery-zepto/js/zepto.js"></script>-->
<script>
var vm = new Vue({
 el:'#app',
 data: {
 url: 'http://*******.com/dynamic.php?s=/Afs/ajaxHisTestServerData/cate_id/4/sta/',
 nowPage: 0,
 switchShow:false,
 games: []
 },
 methods: {
 moreFn: function (itemIndex) {
  // console.log(this.nowPage)
  this.$http.jsonp(this.url + itemIndex*10).then(function (response) {
  this.games=this.games.concat(response.body);
  this.switchShow=!this.switchShow;
  }, function (response) {
   console.log(response)
  });
 },
 getMore: function () {
  this.switchShow=!this.switchShow;
  this.nowPage++;
  this.moreFn(this.nowPage);
 },
 init: function () {
  this.moreFn(this.nowPage);
 }
 },
 directives: {// 自定义指令
 scroll: {
 bind: function (el, binding){
  window.addEventListener('scroll', function () {
  if(document.body.scrollTop + window.innerHeight >= el.clientHeight) {
  var fnc = binding.value; 
  fnc(); 
  }
  })
 }
 }
 }
})
vm.init();
</script>
</body>
</html>

功能介绍:

1.vue进行ajax请求加载;

2.实现滚动,点击加载数据;

3.通过自定义实现loading 效果;

难点:

1.需要官方的vue-resource组件,进行ajax请求,所以需要了解该API;

2.loading,通过v-show进行判断显示不同的loading 效果;

3.自定义指令,也是最难点,所以需要了解基本的自定义指令API;

vue实现ajax滚动下拉加载,同时具有loading效果(推荐)

以上所述是小编给大家介绍的vue实现ajax滚动下拉加载,同时具有loading效果(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
js实现div色块拖动录制
Jan 16 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
浅谈JavaScript中promise的使用
Jan 11 #Javascript
JS多文件上传的实例代码
Jan 11 #Javascript
微信小程序开发(一) 微信登录流程详解
Jan 11 #Javascript
Javascript中return的使用与闭包详解
Jan 11 #Javascript
jQuery对table表格进行增删改查
Dec 22 #Javascript
javascript基础知识讲解
Jan 11 #Javascript
bootstrap侧边栏圆点导航
Jan 11 #Javascript
You might like
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP中把stdClass Object转array的几个方法
2014/05/08 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
use jscript List Installed Software
2007/06/11 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
js中this对象用法分析
2018/01/05 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
关于Python如何避免循环导入问题详解
2017/09/14 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
python保存文件方法小结
2018/07/27 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
2014年党员个人剖析材料
2014/10/08 职场文书
简历自我评价模板
2015/03/11 职场文书
网吧员工管理制度
2015/08/05 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python