全国服务热线:4008-888-888

公司新闻

微信小程序运用实例_vue完成ajax滚动下拉加载,同

vue实现ajax滚动下拉加载,同时具有loading效果(推荐)       这篇文章主要介绍了vue实现ajax滚动下拉加载,同时具有loading效果的实现代码,文章包括难点说明,介绍的非常详细,感兴趣的朋友参考下
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:elli凡科抠图is;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 id="app" v-scroll="getMore" li v-for="item in games" a v-bind:href="item.url" img v-bind:src="item.img" /a a v-bind:href="item.url" {{item.title}} /a em /em span {{item.server}} u 39.9M /u v2.1.3 /span a v-bind:href="item.url" em /em 下载 /a /li /ul div p v-on:click="getMore()" v-show="switchShow" 点击加载更多 /p p v-show="!switchShow" 加载中... /p /div /div script src="js/vue.js" /script script src="vue-resource/1.0.3/vue-resource.min.js" /script !-- script src="vue-tutorials/04.OAuth/jquery-zepto/js/zepto.js" /script -- script var vm = new Vue({ el:'#app', data: { url: '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效果(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服