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

2024年2月7日 144次阅读 来源: 叶子菌菌

写在前面的唠

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

一、情景描述

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…

    原文作者：叶子菌菌
    原文地址: https://segmentfault.com/a/1190000011780657
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞