給Ant Design list列表增加滑動框功能

ISherry 發(fā)布于2019-08-30 15:44 / 837人閱讀

摘要：描述最近在用框架寫一個項目遇到了一個小問題列表會加載出很多數(shù)據(jù)需要在固定區(qū)域查看所有的列表數(shù)據(jù)需求給列表增加一個滑動框開始在官網(wǎng)上看了下例子比較復(fù)雜是結(jié)合實現(xiàn)滾動自動加載列表。

描述:最近在用Ant Design 框架寫一個項目,遇到了一個小問題,list列表會加載出很多數(shù)據(jù).需要在固定區(qū)域查看所有的列表數(shù)據(jù).
需求:給list列表增加一個滑動框

開始在官網(wǎng)上看了下例子.比較復(fù)雜..是list結(jié)合 react-infinite-scroller 實現(xiàn)滾動自動加載列表。
然后我還是嘗試了一下,根據(jù)介紹安裝了react-infinite-scroller 這個框架.但是最終沒有做出想要的效果...

最后一個朋友給我介紹了一個很簡單的方法.
給整個list添加樣式就可以做出來了..

第一步:先設(shè)定固定高度,比如height:370px
第二步:設(shè)定滑動框:overflow-y:"scroll"

關(guān)于overflow-y 我還去查了一下它的用法

這個時候頁面會變成這樣:

在列表的下方和右邊都會出現(xiàn)滑動框,但是需求是只需要在右側(cè)出現(xiàn)滑動框
所以又新加了一個屬性:overflow-x: "hidden"
為了給滾動框留出一點位置,給整個列表加了個padding:6px
最終效果如下:

第一次寫文章.嗯 ,以后養(yǎng)成遇到問題就寫下來的好習(xí)慣.

GPU云服務(wù)器云服務(wù)器 Ant Design ant-design list列表 list列表java

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116331.html

相關(guān)文章

喜大普奔，Ant Design of Vue 1.0版本發(fā)布

摘要：誕生于年月份，年月份正式開源，多次，發(fā)布個版本，個組件，共計個單測，測試覆蓋率。得益于的穩(wěn)定，自發(fā)布第一個版本起，都沒有破壞性的更新，本次發(fā)布的版本自然也沒有破壞性的更新。因要支持低版本的，暫時并沒有提供該功能。 vue-antd-ui是一個站在巨人(antd)肩膀上的UI組件庫，有著其它組件庫沒有的優(yōu)勢，幾乎繼承了antd所有的功能特點，自帶antd各種buff。 vue-antd-...

kamushin233 2019-08-26 12:08 評論0 收藏0
「前端早讀君005」開源與安全：Ant Design圣誕“彩蛋”事件始末

摘要：事件起因是螞蟻金服的開源項目框架的開發(fā)者別出心裁地在組件上埋下了一個在圣誕節(jié)當(dāng)天觸發(fā)的彩蛋。因此，面對這樣的局面，我們能指望的，更多是靠開源作者們遵循某種開源精神，至少像圣誕彩蛋事件，是應(yīng)該可以避免的。 2018年的圣誕節(jié)，讓素有IT娛樂圈稱謂的前端圈著實又熱鬧了一把。事件起因是螞蟻金服的開源項目Ant Design 框架（react-ui）的開發(fā)者別出心裁地在button組件上埋下了...

roland_reed 2019-08-02 14:00 評論0 收藏0
「前端早讀君005」開源與安全：Ant Design圣誕“彩蛋”事件始末

摘要：事件起因是螞蟻金服的開源項目框架的開發(fā)者別出心裁地在組件上埋下了一個在圣誕節(jié)當(dāng)天觸發(fā)的彩蛋。因此，面對這樣的局面，我們能指望的，更多是靠開源作者們遵循某種開源精神，至少像圣誕彩蛋事件，是應(yīng)該可以避免的。 2018年的圣誕節(jié)，讓素有IT娛樂圈稱謂的前端圈著實又熱鬧了一把。事件起因是螞蟻金服的開源項目Ant Design 框架（react-ui）的開發(fā)者別出心裁地在button組件上埋下了...

zhangyucha0 2019-08-23 14:23 評論0 收藏0
Ant Design Pro - 實踐React Hooks - 組件

摘要：另外，監(jiān)聽事件，更新寬度狀態(tài)。文本真實寬度渲染完成后，通過獲取元素寬度。是否超長比較文本真實寬度和組件的寬度。設(shè)置為其他狀態(tài)或中的狀態(tài)時，只在這些狀態(tài)變化時觸發(fā)注意，依賴為對象時，不會深比較。得益于的用法靈活，組件寫法上確實簡潔不少。需求后臺項目，使用Ant Design Pro, 有這樣一個需求：有一個表格，寬度是自適應(yīng)的，表格中有一列是備注，文本長度不定，我們希望在文本過長的時...

twohappy 2019-08-26 10:40 評論0 收藏0
做一個基于react-scripts的腳手架

摘要：前言作為官方的腳手架是相當(dāng)好用的。注意就是腳手架的核心配置代碼。另一個是使用，用戶通過增加修改配置。所以才有了今天的主題基于的腳手架，確切說應(yīng)該是基于的腳手架。其中一定要填寫。前言 create-react-app作為facebook官方的react腳手架是相當(dāng)好用的。主要設(shè)計原理是將配置好的如Webpack，Babel，ESLint，合并到react-scripts這npm包中，用戶就可以...

linkFly 2019-05-23 17:29 評論0 收藏0