vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017-01-11 09:04
1276 查看
代码如下所示:
<!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获取数据的方法
- 详解vue与后端数据交互(ajax):vue-resource
- 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
- vue2 前后端分离项目ajax跨域session问题解决方法
- Vue-resource实现ajax请求和跨域请求示例
- Vue form 表单提交+ajax异步请求+分页效果
- vue使用Axios做ajax请求详解
- Vue.js Ajax动态参数与列表显示实现方法
- 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
- Vue.js展示AJAX数据简单示例讲解
- 详解Vue.js基于$.ajax获取数据并与组件的data绑定
- vue.js 表格分页ajax 异步加载数据
- Javascript vue.js表格分页,ajax异步加载数据
- 浅谈Vue.js应用的四种AJAX请求数据模式
- VUE 更好的 ajax 上传处理 axios.js实现代码
- Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
- Vue Ajax跨域请求实例详解
- vue发送ajax请求详解
相关文章推荐
- vue实现ajax滚动下拉加载,同时具有loading效果
- better-scroll在vue中实现原生滚动和上拉/下拉加载的效果
- jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
- JQuery+CSS3实现Ajax加载时loading效果
- Jquery实现ajax loading加载效果
- Ajax实现简单下拉选项效果【推荐】
- Ajax实现列表无限加载和二级下拉选项效果
- jQuery+AJAX实现无刷新分页滚动下拉加载
- PHP结合Vue实现滚动底部加载效果
- js loading加载效果实现代码
- Silverlight:利用异步加载Xap实现自定义loading效果
- AJAX 实现删除效果(同时更新页面值)
- [给力原创]使用jQuery-ajax仿新浪微博通知折叠/显示效果,实现数据加载(二)
- 基于jquery的loading 加载提示效果实现代码
- 意外发现--玩“JS实现的页面滚动图片加载”效果
- AJAX调用页面后台代码方法实现下拉框二级联动效果
- javscript 实现iframe加载内容页出现Loading效果
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- JQuery实现页面随滚动条滚动而动态加载内容的效果
- JavaScript实现页面滚动图片加载(仿lazyload效果)