給Ant Design list列表增加滑動(dòng)框功能

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

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

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

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

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

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

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

這個(gè)時(shí)候頁面會變成這樣:

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116331.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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