资讯专栏INFORMATION COLUMN

给Ant Design list列表增加滑动框功能

ISherry / 718人阅读

摘要:描述最近在用框架写一个项目遇到了一个小问题列表会加载出很多数据需要在固定区域查看所有的列表数据需求给列表增加一个滑动框开始在官网上看了下例子比较复杂是结合实现滚动自动加载列表。

描述:最近在用Ant Design 框架写一个项目,遇到了一个小问题,list列表会加载出很多数据.需要在固定区域查看所有的列表数据.
需求:给list列表增加一个滑动框

开始在官网上看了下例子.比较复杂..是list结合 react-infinite-scroller 实现滚动自动加载列表。
然后我还是尝试了一下,根据介绍安装了react-infinite-scroller 这个框架.但是最终没有做出想要的效果...

最后一个朋友给我介绍了一个很简单的方法.
给整个list添加样式就可以做出来了..

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

关于overflow-y 我还去查了一下它的用法


这个时候页面会变成这样:

在列表的下方和右边都会出现滑动框,但是需求是只需要在右侧出现滑动框
所以又新加了一个属性:overflow-x: "hidden"
为了给滚动框留出一点位置,给整个列表加了个padding:6px
最终效果如下:

第一次写文章.嗯 ,以后养成遇到问题就写下来的好习惯.

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/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元查看
<