vue实现ajax滚动下拉加载，同时具有loading效果
<!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自定义指令实现下拉加载：v-loadmore
和methods平级: directives: { loadmore: {//自定义指令: 下拉加载 bind(el, binding) { var p = 0; var t = 0; ...
- vue之vant组件下拉加载更多
vant地址:https://youzan.github.io/vant/#/zh-CN/intro 基础用法 List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部 ...
- ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...
- 美团、点评、猫眼App下拉加载效果的源码分享
今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果 以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模 ...
- vue使用vant-ui实现上拉加载、下拉刷新和返回顶部
vue使用vant-ui实现上拉加载.下拉刷新和返回顶部 vue现在在移动端常用的ui库有vant-ui和mint-ui,上拉加载.下拉刷新和返回顶部也是移动端最基础最常见的功能.下面就用vant-u ...
- MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
- vue实现pc端上拉加载功能，不兼容移动端
所用插件:Mock.js 这个只用到它简单的功能,拦截ajax请求. vue和axios,vue基础知识请看文档. axios类似于jquery的ajax方法. 以下是是该功能所有代码,其中mock的 ...
- JQuery实现无刷新下拉加载图片
最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...
- iscroll5 上拉，下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
随机推荐
- HDOJ 4248 A Famous Stone Collector DP
DP: dp[i][j]前i堆放j序列长度有多少行法, dp[i][j]=dp[i-1][j] (不用第i堆), dp[i][j]+=dp[i-1][j-k]*C[j][k] (用第i堆的k个石头) ...
- 在ASP.NET2.0里打印网页指定的内容（比如打印网页里的一个Table）
原文:在ASP.NET2.0里打印网页指定的内容(比如打印网页里的一个Table) 打印指定内容: <html> <head> <script type= " ...
- Android pm命令用法
Sam综观有关PackageManager时,无意中发现Android 下提供一个pm命令,通常放在/system/bin/下. 这个命令与Package有关.且很有用.所以研究之. 0. Usage ...
- 快速解读GC日志(转)
本文是 Plumbr 发行的 Java垃圾收集手册 的部分内容.文中将介绍GC日志的输出格式, 以及如何解读GC日志, 从中提取有用的信息.我们通过 -XX:+UseSerialGC 选项,指定JVM ...
- nyoj 517 最小公倍数 【java睑板】
我写了一个gcd TL该.然后调用math内gcd,AC该... 思维:它是采取n前面的最小公倍数和n求 1~n的最小公倍数 代码: import java.util.Scanner; import ...
- 大约SQL/NoSQL数据库搜索/思考查询
转载请注明出处:jiq•钦's technical Blog Hbase特征: 近期在学习Hbase.Hbase基于行健是建立了索引的,查询速度会很快,全然实时. 可是Hbase要基于行健之外的字段进 ...
- Lichee （六） 优化配置的微内核
我们的分析<Lichee(二) 在sun4i_crane平台下的编译 >的时候.竟然没有一个步骤是在配置内核 make ARCH=arm menuconfig 细致的读过的代码的会发现,在 ...
- 如何为ios酷我音乐盒下载导出的音乐文件(使用Java程序设计)
这个工具已经准备第二版,读者了解编程软件,可以直接使用,请阅读和使用这个场地 http://blog.csdn.net/jzj1993/article/details/44459983 本文所涉及内容 ...
- BZOJ 1025 SCOI2009 游戏 动态规划
标题效果:特定n.行定义一个替代品1~n这种更换周期发生后,T次要(T>0)返回到原来的顺序 找到行的所有可能的数 循环置换分解成若干个,然后行位移数是这些周期的长度的最小公倍数 因此,对于一些 ...
- 高性能网络server--I/O复 select poll epoll_wait之间的差
一个.select 方式作为收集,最多只能监控1024描述叙事断裂的文件,内部使用位操作,相应的位置1或设置0,必须是可读.可写.三类除单独的事件,内部查询方法.将全部的套接字从内核到用户空间之间进行 ...