vue loading 多个ajax,vue实现ajax滚动下拉加载，同时具有loading效果(推荐)

代码如下所示：

vue测试ajax的使用

*{ 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}

• {{item.title}}

  {{item.server}}39.9Mv2.1.3

  下载

点击加载更多

加载中...

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();

功能介绍：

1.vue进行ajax请求加载；

2.实现滚动，点击加载数据；

3.通过自定义实现loading 效果；

难点：

1.需要官方的vue-resource组件，进行ajax请求,所以需要了解该API；

2.loading,通过v-show进行判断显示不同的loading 效果；

3.自定义指令，也是最难点，所以需要了解基本的自定义指令API;

以上所述是小编给大家介绍的vue实现ajax滚动下拉加载，同时具有loading效果(推荐)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！