AnglarJs中的上拉加载实现代码

网络编程 2024/11/13 佚名

3 2 1

简介

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

实现

页面

 <div class="search-box">
 <b class="dw" ></b>
  <input type="search" class="search-input" placeholder="请输入搜索关键词" ng-model="catparm">
  <b class="dw" ng-click="serchcat()"><img src="/UploadFiles/2021-04-02/cg-app-search.png">

controller中上拉加载功能使用




app.controller('wdListCtrl', ['$scope','catInfoService', function ($scope,catInfoService) {
//下拉加载service
 $scope.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 =null;
   this.busy = false;
   this.after = '';
   this.page = 1;
   this.pagenum =10;
   this.title = '';
   this.varieties ='';
  };
  CatInfo.prototype.nextPage = function () {
   if (this.busy) return;
   this.busy = true;
   var url = baseurl+"接口地址" + this.page + "&pagenum="+ this.pagenum + "&title="+this.title+ "&varieties="+this.varieties+"&callback=JSON_CALLBACK";
   $http.jsonp(url).success(function(data) {
    var items =data.data;
    console.log(items);
    if( this.items == null){
     this.items=items;
    }else{
     for (var i =0;i < items.length; i++) {
      this.items.push(items[i]);
     }
    }
    this.after = "t_" + this.items[this.items.length -1 ].id;
    if(items != null){
     if(items.length< 10){
      this.busy = true;
     }else{
      this.busy = false;
     }
    }
    this.page +=1;
   }.bind(this));
  };
  return CatInfo;
 }] );
});


效果

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