代碼如下所示：
<!doctype html><html><head><meta charset="utf-8"><title>vue測(cè)試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">點(diǎn)擊加載更多</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進(jìn)行ajax請(qǐng)求加載；
2.實(shí)現(xiàn)滾動(dòng)，點(diǎn)擊加載數(shù)據(jù)；
3.通過自定義實(shí)現(xiàn)loading 效果；
難點(diǎn)：
1.需要官方的vue-resource組件，進(jìn)行ajax請(qǐng)求,所以需要了解該API；
2.loading,通過v-show進(jìn)行判斷顯示不同的loading 效果；
3.自定義指令，也是最難點(diǎn)，所以需要了解基本的自定義指令A(yù)PI;
以上所述是小編給大家介紹的vue實(shí)現(xiàn)ajax滾動(dòng)下拉加載，同時(shí)具有l(wèi)oading效果(推薦)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
