ng-water-scroll

正如上篇文章說(shuō)的，由于項(xiàng)目中的樣式有點(diǎn)特殊要求，所以自己在項(xiàng)目中寫了一個(gè)瀑布流組件，在這里分享下，由于最近沒(méi)太多時(shí)間，趁中秋把這個(gè)組件發(fā)上來(lái)，寫的不是很詳細(xì)，畢竟中秋，我的心已經(jīng)發(fā)出去啦。有問(wèn)題的可以留言，多謝大家支持

寫完這篇指令估計(jì)不會(huì)再寫關(guān)于ng1.x的文章了，我會(huì)把重心放在ng2，多謝大家支持

使用這個(gè)指令來(lái)實(shí)現(xiàn)瀑布流的效果，但是這個(gè)指令適用有局限性,當(dāng)你需求滿足以下幾點(diǎn)的時(shí)候，你可以使用這個(gè)指令來(lái)完成瀑布流效果，如果你發(fā)現(xiàn)你的需求不滿足以下條件，你可以嘗試下 ngInfiniteScroll

• 滾動(dòng)的容器高度固定

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: 觸發(fā)scroll-load方法的距離，該距離代表滾動(dòng)條距離底部的高度，目前只支持像素范圍，只需輸入數(shù)字，不需要輸入單位

• scroll-load: 當(dāng)滾動(dòng)到合適的距離時(shí)，他會(huì)觸發(fā)這個(gè)的方法

• scroll-container: 指定數(shù)據(jù)存貯的容器

• loadding-info: 當(dāng)數(shù)據(jù)加載時(shí)，出現(xiàn)加載數(shù)據(jù)html片段

• load-disabled: 是否允許數(shù)據(jù)加載

Event

---

• scrollLoadingFinfish 數(shù)據(jù)加載完成

• stopLoading 停止繼續(xù)加載數(shù)據(jù)

• startLoading 重新開(kāi)始加載數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的angular组件－特殊的瀑布流（原创）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。