加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angular组件-特殊的瀑布流(原创)

发布时间:2020-12-17 09:55:52 所属栏目:安全 来源:网络整理
导读:ng-water-scroll 正如上篇文章说的,由于项目中的样式有点特殊要求,所以自己在项目中写了一个瀑布流组件,在这里分享下,由于最近没太多时间,趁中秋把这个组件发上来,写的不是很详细,毕竟中秋,我的心已经发出去啦。有问题的可以留言,多谢大家支持 写完

ng-water-scroll

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

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

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

  • 滚动的容器高度固定

Demo


  • 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 重新开始加载数据

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读