angular组件－特殊的瀑布流（原创）

2024年1月18日 173次阅读 来源: 第三方x

ng-water-scroll

正如上篇文章说的，由于项目中的样式有点特殊要求，所以自己在项目中写了一个瀑布流组件，在这里分享下，由于最近没太多时间，趁中秋把这个组件发上来，写的不是很详细，毕竟中秋，我的心已经发出去啦。有问题的可以留言，多谢大家支持

写完这篇指令估计不会再写关于ng1.x的文章了，我会把重心放在ng2，多谢大家支持

使用这个指令来实现瀑布流的效果，但是这个指令适用有局限性,当你需求满足以下几点的时候，你可以使用这个指令来完成瀑布流效果，如果你发现你的需求不满足以下条件，你可以尝试下 ngInfiniteScroll

  • 滚动的容器高度固定

Demo

Bower

    bower install --save-dev ng-water-scroll

Usage

<ANY water-scroll scroll-container="containIdName" style="overflow: scroll;height:600px;"  scroll-load="fn()">
    <ANY  id="containIdName">
           
    </ANY>
</ANY>

waterScroll Parameters

  • scroll-distance: 触发scroll-load方法的距离，该距离代表滚动条距离底部的高度，目前只支持像素范围，只需输入数字，不需要输入单位

  • scroll-load: 当滚动到合适的距离时，他会触发这个的方法

  • scroll-container: 指定数据存贮的容器

  • loadding-info: 当数据加载时，出现加载数据html片段

  • load-disabled: 是否允许数据加载

Event

  • scrollLoadingFinfish 数据加载完成

  • stopLoading 停止继续加载数据

  • startLoading 重新开始加载数据

    原文作者：第三方x
    原文地址: https://segmentfault.com/a/1190000006921007
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞