简介

上拉加载，是目前手机网站加载数据的一种常用方式，本文主要讲解AnglarJs集成，上拉加载功能。通常与下拉刷新配置使用，下拉刷新请查阅。

实现

页面

div class=' search-box ' b class=' dw '输入类型='search' class='search-input '占位符='请输入搜索关键词ng-model=' cat parm ' b class=' dw ' ng-click=' serchcat()' img src=' http : { { base path } } images/CG-app-search。png '/div class=' list-box ' div无限滚动='catinfo.nextPage()'无限滚动-禁用='catinfo.busy '无限滚动-距离=' id=' catinfolist ' ul Li ng-repeat=' catinfo。项目中的分支！- li ng-repeat='branch中的分支-a ng-click=' show QR(分支。QR)' dl dt class=' search-key-img ' img ng-src=' http : { { branch }。cati mg } } '/dt DD class=' search-key-title ' p { { branch。title } }/p/DD class='搜索-关键字-信息' span联系人： { { branch。linkman } }/span span品种： { { branch。variants } }/span span style=' color : red；'价格： { { branch。价格} }/span/DD class='搜索-关键字-标签' span地址： { { branch。region } }/span span ng-if='分支。微信号！='''微信号：{{branch。微信号码} }/span/DD DD class='搜索-关键字-标记' p发布时间： { { branch。发布时间} }/p/DD/dl/a/Li/ul div ng-if=' cati nfo。物品。长度=10 ' div ng-show=' catinfo。busy ' align=' center ' style=' margin-top 33605 px；'！-img src=' http : { {基本路径} }图像/729 .GIF ' style=' width :50 px ' height :50 px '-装载./div/div ng-if=' cati nfo。物品。长度% 10！=0 ' p class='get-more '我也是有底线的/p/div/对话框加载-数据='数据'/对话框/divcontroller中上拉加载功能使用

app。控制器(' wdlistcrl '，['$scope '，' catInfoService '，函数($scope，catInfoService) {//下拉加载服务$范围。catinfo=new catInfoService()；封装上拉加载CatInfoService.js

/** 2017-10-26 *作者：卜凡起*功能： */define(['jquery '，' app']，function ($，app){ app。service(' catInfoService '，['$location '，' $http '，function($location，$ http){ var CatInfo=function(){ this。items=nullthis.busy=falsethis.after=this。page=1；this . page num=10 this . title=this . varies=}；卡蒂诺。原型。下一页=function(){ if(this。忙)返回；this.busy=true' var url=baseurl '接口地址？page=' this。page ' page num=' this。页码“title=”这个。title ' variables=' this。varies ' CALLBACK=JSON _ CALLBACK$http.jsonp(url).成功（函数（数据){ var items=data.dataconsole.log(项目);如果(这个。items==null){ this。项目=项目；} else { for(var I=0；一。项目。长度；我){这个。物品。推送(项目[I])；} }这个。在=' t _ '之后。物品[这个。物品。长度-1].id；if(items！=null){ if(items。长度10){这个。忙碌=真；} else { this.busy=false} } this。page=1；}.绑定（这个));};返回CatInfo }])；});效果

总结

以上所述是小编给大家介绍的AnglarJs中的上拉加载实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！