这篇文章主要介绍了vue实现ajax滚动下拉加载，同时具有loading效果的实现代码，文章包括难点说明，介绍的非常详细，感兴趣的朋友参考下
代码如下所示：
<title>vue测试ajax的使用</title> *{ 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-heig<i>本文来源gaodai$ma#com搞$代*码网2</i>ht: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} <div class="list" id="app"> <ul> <li> <p> {{item.title}}<em class="lstar4"></em><span>{{item.server}}<u>39.9M</u>v2.1.3</span></p><em class="bg"></em>下载</li></ul><div> <p class="get-more">点击加载更多</p><p class="loading">加载中...</p></div></div>
功能介绍：
1.vue进行ajax请求加载；
2.实现滚动，点击加载数据；
3.通过自定义实现loading 效果；
难点：
1.需要官方的vue-resource组件，进行ajax请求,所以需要了解该API；
2.loading,通过v-show进行判断显示不同的loading 效果；
3.自定义指令，也是最难点，所以需要了解基本的自定义指令API;
以上就是vue实现ajax滚动下拉加载，同时具有loading效果(推荐)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
转载请注明原文链接：vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
