国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

ISherry / 746人閱讀

摘要:描述最近在用框架寫一個項目遇到了一個小問題列表會加載出很多數據需要在固定區域查看所有的列表數據需求給列表增加一個滑動框開始在官網上看了下例子比較復雜是結合實現滾動自動加載列表。

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

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

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

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

關于overflow-y 我還去查了一下它的用法


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

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

第一次寫文章.嗯 ,以后養成遇到問題就寫下來的好習慣.

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/116331.html

相關文章

  • 喜大普奔,Ant Design of Vue 1.0版本發布

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

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

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

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

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

    zhangyucha0 評論0 收藏0
  • Ant Design Pro - 實踐React Hooks - 組件

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

    twohappy 評論0 收藏0
  • 做一個基于react-scripts的腳手架

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

    linkFly 評論0 收藏0

發表評論

0條評論

ISherry

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<