工作记录：不定宽度展开收起卡片

leon 发布于2019-08-22 11:13 / 455人阅读

摘要：写在前面的唠简单记录一下工作中出现的需求和常见的问题，时常记录总结，希望能在之后的工作中吸取经验教训，提高工作效率。只展示一行数据的时候给固定高度为了显示展开收起按钮，因为设定分辨率是来回变的，思来想去还是使用了监听事件。

写在前面的唠

简单记录一下工作中出现的需求和常见的问题，时常记录总结，希望能在之后的工作中吸取经验教训，提高工作效率。如果可以帮助有同样问题的同学我会很开心的，有的方法可能是可以解决问题，但是一定还有更好的办法。希望路过的同学可以多交流思路，多多指教。

一、情景描述

1.展示一行卡片，默认显示一行，如果一行无法显示所有卡片，则出现收起／展开按钮；
2.点击展开：显示所有卡片，按钮文字变成“收起”
3.点击收起：如默认状态，仅显示一行卡片，且按钮文字变成“展开”

二、我的困难

之前做过类似的需求，是从节点的角度实现展开和收起的，但是在这个场景下不太适合，因为卡片的个数和屏幕的大小是不确定的，也就是说，一行能显示多少个卡片是不确定的。

三、解决方法

1.其实css就可以实现这个效果，思路如下：因为卡片的高度是一定的，那么一行卡片的高度是确定的，这样的话对height属性做变化就可以了，并且不需要对DOM和数据进行操作。

const hideStyle = {
    height: "62px", // 只展示一行数据的时候给固定高度
    overflow: "hidden"
}

const strechStyle = {
    height: "auto"
｝

2.为了显示展开／收起按钮，因为设定分辨率是来回变的，思来想去还是使用了resize监听事件。

componentDidMount() {
this.showOrHideModelExpandButton("listWrap");
window.addEventListener("resize", this.onResizeHandle);
}

componentWillUnmount() {
    window.removeEventListener("resize", this.onResizeHandle);
}

四、还在困扰我的问题

使用resize事件性能太差，所以在不使用resize的情况下是否可以完成这个功能呢？或者说如何提高resize的性能又成为了另一个问题。

代码地址：https://github.com/SycamoreYC...

GPU云服务器云服务器 js 展开收起动画 android 展开收起功能 js实现展开与收起 asp 工作记录

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

转载请注明本文地址：https://www.ucloud.cn/yun/91987.html

支持多框架的组件库KPC 1.0正式发布

摘要：自从年月份对外公布以来，已经经过了个月的迭代，期间发布了几十个正式版本，但一直没有到，因为我们觉得是个里程碑版本，我们必须做的足够完善才敢称之为。自从17年11月份对外公布以来，KPC已经经过了8个月的迭代，期间发布了几十个正式版本，但一直没有到1.0，因为我们觉得1.0是个里程碑版本，我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布：KPC 1.0终于来了！其实距离...

刘厚水 2019-08-26 10:10 评论0 收藏0
用原生 js && jquery 实现知乎收起答案功能

摘要：需求很简单，而且和知乎的显示全部收起功能非常相似，但是了一下没有找到类似的，因此决定自己实现一个看了知乎的网页代码。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

brianway 2019-08-20 12:19 评论0 收藏0
用原生 js && jquery 实现知乎收起答案功能

摘要：需求很简单，而且和知乎的显示全部收起功能非常相似，但是了一下没有找到类似的，因此决定自己实现一个看了知乎的网页代码。 showImg(https://segmentfault.com/img/remote/1460000008488966);showImg(https://segmentfault.com/img/remote/1460000008488967); Update 20...

Seay 2019-08-01 15:57 评论0 收藏0
《CSS世界》阅读笔记（二）——块级元素与基本尺寸

摘要：块级元素基本概念块级元素是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。其中内部尺寸由内部元素决定还有一类叫作外部尺寸宽度由外部元素决定。所以子元素的高度设为是无效的。此时的就会有计算值，即使祖先元素的计算为也是如此。块级元素基本概念块级元素：是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。块级元素和display 为 block 的元素不是一个概念。每...

lylwyy2016 2019-08-29 18:31 评论0 收藏0