写在前面的唠
简单记录一下工作中出现的需求和常见的问题,时常记录总结,希望能在之后的工作中吸取经验教训,提高工作效率。如果可以帮助有同样问题的同学我会很开心的,有的方法可能是可以解决问题,但是一定还有更好的办法。希望路过的同学可以多交流思路,多多指教。
一、情景描述
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的性能又成为了另一个问题。