angular-infinite-list

angular 无限滚动列表组件
授权协议 MIT
开发语言 JavaScript TypeScript
所属分类 iOS代码库、 高级UI组件(Advanced)
软件类型 开源软件
地区 国产
投 递 者 淳于泓
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

一个短小精悍的angular无限滚动列表组件,无任何依赖

  • Tiny & dependency free – Only 3kb gzipped

  • Render millions of items, without breaking a sweat

  • Scroll to index or set the initial scroll offset

  • Supports fixed or variable heights/widths

  • Vertical or Horizontal lists

地址:https://github.com/drawcall/angular-infinite-list

例子:https://drawcall.github.io/angular-infinite-list



Using npm:

npm install angular-infinite-list --save

Import angular Infinite list module into your app module

import { InfiniteListModule } from 'angular-infinite-list';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    InfiniteListModule,
    ...

Wrap Infinite list tag around list items

<infinitelist
    [width]='"100%"' 
    [height]='500' 
    [data]='data' 
    [itemSize]='50' 
    (update)='event = $event'>
        <div *ngFor="let item of event?.items; let i=index;" [ngStyle]="event.getStyle(i)">
            item{{event.start + i}} : {{item|json}}
        </div>
</infinitelist>

or directive usage
<div infinitelist [width]='"100%"' ...</div>
  • 这次给大家带来vue1与vue2获取dom元素步骤详解,vue1与vue2获取dom元素的注意事项有哪些,下面就是实战案例,一起来看一下。vue1.*版本中在标签中加上el='dom',然后在代码中this.$els.dom这样... 这次给大家带来Vue无限加载vue-infinite-loading使用详解,Vue无限加载vue-infinite-loading使用的注意事项有哪些,下面就是实

  • 按照下面的两篇博客,我实现了滑动到底部加载更多的功能,虽然使用体验不是特别好。 AngularJS:实现页面滚动到底自动加载数据的功能 使用Angularjs、jQuery在手机上实现滑动条到底自动加载更多功能 通过这两篇文章,大体了解了如何在Angular中使用ng-infinite-scroll 插件实现Android中ListView的效果 但是在实际使用的过程中发现,当数据不足一屏时,页面

  • 最近的项目中,是用angularjs写的,领导要求,其中的效果都用angular去写。 这不,对接数据后就遇到问题啦,关于瀑布流的问题。 之前是用的masonry.js这个插件,这个插件也很好,但是在与后台对接后,布局就乱了,我是百思不得其解,为什么对接前好好的,对接后就不行啦。。。 后来就找呀找,也试了很多其他插件,虽然都是打着angularjs的名义,但是个人试用了几个,没有效果,不知道是不是

  • 1、ion-infinite-scroll 上拉分页加载更多(模 拟)   官方文档:https://ionicframework.com/docs/api/infinite-scroll   <ion-content> <ion-list> <ion-item *ngFor="let item of data"> {{item}} </ion-item> </ion-list> <ion-inf

  • angular 1.7.5 介绍 (Introduction) Angular has released its latest version, Angular 7.0. In this article, we will explore the following points: Angular发布了最新版本Angular 7.0。 在本文中,我们将探讨以下几点: What is new in A

  • 前言:最近在做一个项目用的Angular1.x 写了一些页面,现在遇到一个问题,需要实现列表页面的下拉刷新及上拉加载。于是乎进行了各种百度,刚开始搜的是“js 上拉刷新下拉加载”,可是发现搜出来的都是jq ajax 请求数据,与现在的angular加载数据的方式有所区别,显然是用着是不太合适的。接着百度了“angular 上拉刷新下拉加载”,打开一看发现根本看不懂,无意间发现了《ionic》(之前

  •   阅读本博客的同学先看一下本博客的主要内容点,如果咩有涉及到同学们需要的知识点,请绕道,有错误请及时指出,以免祸害其他同学:   主要内容点: 1、如果获取ng-transclude的内容; 2、获取了ng-transclude内容之后如果动态添加内容,并且编译然后加载到dom中; 3、如果在子作用域(指令)中操作父作用域(调用指令的地方所在的controller上下文)的变量(新增,修改等);

  • 一、Ionic的使用 1.概述: Ionic是基于angular的移动端的ui组件库: (在后续的升级版本中,也在支持以cdn的方式,支持vue、react、js,但是这个新版本手册不够友好,还有些问题)     ionic = angular+ionicModule+cordova+icons 推荐一些angular建议的ui组件库:   Material:https://material.an

 相关资料
  • 描述 (Description) 无限滚动允许您加载其他内容,并在页面接近底部时执行所需的操作。 以下HTML布局显示无限滚动 - <div class = "page"> <div class = "page-content infinite-scroll" data-distance = "100"> ... </div> </div> 上面的布局包含以下类 - pa

  • 本文向大家介绍js实现列表向上无限滚动,包括了js实现列表向上无限滚动的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现列表向上无限滚动的具体代码,供大家参考,具体内容如下 先来一张效果图 html js css(样式自己调) 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。 在底部的无限滚动 你只需在可滚动的容器上添加“infinite-scroll”类,一般是页面滚动区域 - div.content <style type="text/css"> .infinite-scroll-preloader { margin-top:-20px; } </style> <heade

  • 无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。 无限滚动HTML结构 你只需在可滚动的容器上添加“infinite-scroll”类,一般是页面滚动区域 - <div class="page-content">: <div class="page"> <div class="page-content infinite-scroll" data-distance="100">

  • 我一直在研究一个思想,在这个思想中,它保持自动滚动,而不需要用户交互,这一点在使用android API(例如,SmoothScrollTopositionFromTop)时是绝对可行的。 我需要提高流畅度,效率和控制速度

  • 问题内容: 如何使量角器向下滚动到桌子上?我的表可以无限滚动- 加载20条记录,并且在显示倒数第二行时,它将获取接下来的20条记录。并非所有记录都在视图中…有些滚动到下面,而有些滚动到用户上方时。我以为测试是 这是正确的方法吗? HTML表格代码: 问题答案: 这个想法是在表(标签)中找到最新的元素,然后通过将父元素的元素设置为最后一个元素的元素来滚动到该元素。 该属性获取或设置元素内容向上滚动的