vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
更新时间：2017年01月11日 09:04:50 作者：还能再菜点吗
这篇文章主要介绍了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效果(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器， 则可以借助mock.js配置一个后端服务器来返回前端需要的数据，本文将会分别介绍在Quasar项目和Vite项目中Mock服务器的配置方法2022-12-12
如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,这篇文章主要给大家汇总介绍了关于Vue项目中常用的实用技巧,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue实现的组件兄弟间通信功能,结合实例形式分析了vue兄弟组件间通信的原理与相关操作技巧,需要的朋友可以参考下2018-12-12
vue中json格式化显示数据(vue-json-viewer)
这篇文章主要给大家介绍了关于vue中json格式化显示数据(vue-json-viewer)的相关资料,Vue-json-viewer是一个Vue组件,用于在Vue应用中显示JSON数据的可视化工具,需要的朋友可以参考下2024-05-05
很多时候我们会在全局调用一些方法,本文主要介绍了vue全局方法plugins/utils的实现示例,具有一定的参考价值,感兴趣的可以了解一下2024-07-07
Vue 3中引入了组合式API,它是一种新的代码组织方式,旨在让开发者更灵活地组织和重用Vue组件的逻辑,下面我们就来学习一下Vue中常见组合式API的使用吧2023-11-11
这篇文章主要介绍了Vue实现全局的toast组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
vue中el-date-picker type=daterange日期清空时不回显的解决
这篇文章主要介绍了vue中el-date-picker type=daterange日期清空时不回显的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了nuxt+axios解决前后端分离SSR的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要给大家介绍了关于vue3点击不同的菜单页切换局部页面实现的相关资料,文中示例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考价值,需要的朋友可以参考下2023-08-08
最新评论