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 相关文章推荐
JavaScript的类型简单说明
Sep 03 Javascript
JavaScript 放大镜 移动镜片效果代码
May 09 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
js实现新年倒计时效果
Dec 10 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
Node Puppeteer图像识别实现百度指数爬虫的示例
Feb 22 Javascript
微信小程序如何连接Java后台
Aug 08 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
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php编写一个简单的路由类
2011/04/13 PHP
[原创]图片分页查看
2006/08/28 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
浏览器页面区域大小的js获取方法
2013/09/21 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
基于jQuery实现美观且实用的倒计时实例代码
2015/12/30 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
2017/06/22 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
JS html事件冒泡和事件捕获操作示例
2019/05/01 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
js实现点赞效果
2020/03/16 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
解决pycharm无法识别本地site-packages的问题
2018/10/13 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
学习十八大精神心得体会
2013/12/31 职场文书
自我鉴定总结
2014/03/24 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
爱的承诺书
2015/01/20 职场文书
民事调解书范文
2015/05/20 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
【2·13】一图读懂中国无线电发展
2022/02/18 无线电
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技