dongxi8993 2016-07-14 12:45
浏览 32

从角度远程服务器无限滚动

I am working on an ionic angular project. There's a section where I'm implementing infinite scroll, and when I scroll to the bottom I see the data showing up.

What I've realized is the data somehow pre-populates and hides, waiting to come up when the user reaches the bottom of the page. Because no call is made to the server to load the other feeds, I'm displaying 5 records at a time.

From the php script, I've converted to a json. I have 60 rows, and from the chrome console I read the json length to be 60, meaning all the 60 rows are loaded up were the data is pre-populated already.

Is there a way I can show 5 records at a time and then when the user scrolls to the bottom it passes the last id, so a call would be made to the server to load the feeds?

JS:

.controller('feedsctrl',['$scope','$http',function($scope,$http){
$http.get('http://usefulsite.com/app/feeds.php').success(function(data){
       $scope.feeds= console.log(data); ;
       $scope.feeds=data;

       $scope.numberOfItemsToDisplay = 5; // Use it with limit to in ng-repeat
$scope.addMoreItem = function(done) {
    if ($scope.feeds.length > $scope.numberOfItemsToDisplay)
        $scope.numberOfItemsToDisplay += 5; // load number of more items
        $scope.$broadcast('scroll.infiniteScrollComplete')
});

php

SELECT * FROM users order by fname asc

HTML

<ion-content overflow-scroll="false" has-bouncing="true">

        <div ng-controller="feedsctrl" class="list card has-subheader" ng-repeat="item in feeds | filter:scheduleSearch | limitTo:numberOfItemsToDisplay">

            <div class="item item-avatar">
                <img src="http://usefulsite.com/resize_image/images.php?image={{item.profile_pix}}&new_width=100&new_height=100">
                <h2><a class="names" href="#/tab/source/{{item.profile_id}}">{{item.fname}}&nbsp;{{item.lname}}</a></h2>
                <p>November 05, 1955</p>
            </div>

            <div class="item item-body">
                <img class="full-image" src="http://usefulsite.com/aoo/resize_image/images.php?image={{item.pic}}&new_width=800&new_height=800">
<p>{{item.fname}} {{item.lname}}</p>
            </div>

        </div>


        <ion-infinite-scroll

                on-infinite="addMoreItem()"
                distance="1%"
                ng-if="feeds.length > numberOfItemsToDisplay">
        </ion-infinite-scroll>
  • 写回答

1条回答 默认 最新

  • drzablspw01655860 2016-07-20 17:28
    关注

    If you have the entire data at client side than you can use the angular pagination directive for a better performing experience.

    Try like this.

    var app = angular.module('plunker', []).controller('pagedController', function($scope) {

   $scope.numPerPage = 5;
   $scope.data = [];
  
$scope.items = [];
for (i=1;i<=60;i++) {
  $scope.items.push({ text:'item '+i});
}


  $scope.getMoreData = function () {
  $scope.data = $scope.items.slice(0, $scope.data.length + $scope.numPerPage);
  };
  
  $scope.getMoreData();
  
});

app.directive('infiniteScroll', function() {
return function(scope, elm, attr) {
    var raw = elm[0];
    
    elm.on('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.infiniteScroll);
        }
    });
};
});
     .itemContainer
 {
width: 150px;
height: 130px; 
border: thin solid black;
overflow-x: hidden;
overflow-y: scroll;
 }


 .item
 {
            
background: #f9f9f9;
font-family: verdana;
margin: 7px;
width : 110px;
  }
    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<script src="script.js"></script>
  </head>
  
  <body ng-controller="pagedController">
<h1>Infinite scroll</h1>
<h4>{{items.length}} items</h4>
<div class="itemContainer" infinite-scroll="getMoreData()">
<ul>
  <li ng-repeat="item in data" class="item">{{item.text}}</li>
</ul>
</div>

  </body>

</html>

    Plunker : http://plnkr.co/edit/TJi4Um6a31fYsmVwtAmZ?p=preview

    </div>
    评论

报告相同问题？

  • javaweb如何从远程服务器下载文件夹 java
    2022-02-16 05:50
    回答 4 已采纳 可以尝试下载时候自己新建一个文件夹然后将文件逐个写入。 public String findFileSavePathByFileName(String filename,String saveRo
  • android如何从远程服务器下载文件 android java linux
    2022-02-08 15:54
    回答 2 已采纳 httpclient ftp 都行吧
  • 云服务器的前端请求本地后端出现跨域问题 spring boot spring cloud 前端
    2022-11-06 23:39
    回答 1 已采纳 回答：也有可能是预检请求出现跨域问题，这个是响应头没有符合要求，有可能在后端获得这个请求的时候没有放行，看一下请求的Network，显示的方式是不是Options，另外正常的axios发送请求附带头部
  • 前后端分离：前端vue项目部署到服务器
    2021-02-25 17:48
    ~牧马~的博客 笔者总结：最先自己买了centOS腾讯云服务器，按照官方文档操作，半天没有进入到服务器终端（最可气的，进入了，无法输入命令，界面提示：失败），最后借助xshell连接的服务器并操作，xshell如何连接服务器呢？...
  • 电脑远程连接其他服务器问题 服务器
    2018-07-20 02:45
    回答 2 已采纳 如果对方计算机没有相应的软件或者配置，只有ip，在不利用系统漏洞和使用黑客手段的情况下，你没有办法连接的。 要真能连接，岂不是乱套了。我这里ping一下，银行、政府甚至五角大楼的ip都知道呢。
  • windows远程连接到服务器 windows
    2017-01-28 02:44
    回答 2 已采纳 ping下，网络是否连通。服务器的3389端口是否打开，防火墙是否禁用了它。远程计算机是否启用了远程连接。
  • 如何配置远程桌面服务器？ 服务器
    2016-04-21 15:29
    回答 2 已采纳 在我的电脑上点右键，属性，选择左边的高级属性，选择远程标签，启用远程桌面。选择用户，把当前用户添加进去，如果当前用户没有密码，设置一个密码。 然后在控制面板，系统安全里面找到防火墙，配置例外，勾选远
  • 远程服务器简略指南
    2020-11-19 15:59
    XerCis的博客 远程服务器简略指南 远程登录 日期时间日历 快捷键 帮助文档 文件权限 看到156 pip使用镜像 TensorFlow Python含中文无法运行 压缩解压 安装Jupyter notebook Git 后台启动脚本nohup 前端报错...MobaXterm 快捷键 ...
  • 远程服务器编码格式问题 java linux tomcat 有问必答
    2021-07-14 09:41
    回答 2 已采纳 新增，编辑文章的页面有没有指明utf-8编码呢？在线编辑器有没有设置utf-8编码呢？
  • 远程连接小鸟云服务器很慢 windows 服务器
    2021-09-27 11:12
    回答 1 已采纳 先ping服务器IP看看延迟正常不，有可能是线路的问题，也有可能是服务器资源跑满的问题，现在金秋上云季有1折的云服务器，和6折升级续费券，如果资源不够用可以重新去看看。
  • android如何从远程服务器下载中文名字的文件 android java
    2022-02-17 04:34
    回答 1 已采纳 对中文进行url编码
  • 前端面试八股文（超详细）
    2022-03-06 17:42
    小泽今天早睡的博客 前端缓存的理解 或者 前端数据持久化的理解 前端缓存分为HTTP缓存和浏览器缓存 其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；而浏览器缓存则主要由前端开发在前端js上进行设置。 缓存可以...
  • 本地连接远程服务器数据库的问题
    2015-05-29 12:24
    回答 1 已采纳 * 1.你扫描的是外网没有开3306对吧。不一定是对内网没开。你的php对mysql来说是内网，所以关键是你内网连mysql是不是通、如果你是云主机的话，可以直接从php服务器telnet一下3306
  • 前端最全面试题整理（持续更新）
    2023-02-17 23:56
    胡肖一的博客 题比较全，但是原版很多题的答案不是很清晰，在此基础上我重新补充了一下 最近应该会持续的把这些题的答案更新完 2023.2.17 目录 写在前面 前端基础 一、 HTTP/HTML/浏览器P 1、说一下 http 和 https (1) http 和 ...
  • 从前端到服务器全栈搭建个人博客
    2019-07-26 02:34
    weixin_30293135的博客 全栈开发—博客前端展示(Nuxt.js) 这个开发的想法是这样来的，大概两个月前，腾讯云的工作人员打电话给我，说我的域名没有解析到腾讯云的服务器上，而且页脚也没有备案号。我当时就震惊了，居然会打电话给我，然而我...
  • 没有解决我的问题, 去提问

悬赏问题

  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测，loss值优化，参数优化算法
  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request，如何使用ssr节点，通过代理requests网页。本人在泰国，需要用大陆ip才能玩网页游戏，合法合规。
  • ¥100 为什么这个恒流源电路不能恒流？
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson，入参实体类Person，出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题，上传的坐标文件里是怎么对无序点进行编号的，以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP