写在前面的唠
简单记录一下工作中出现的需求和常见的问题,时常记录总结,希望能在之后的工作中吸取经验教训,提高工作效率。如果可以帮助有同样问题的同学我会很开心的,有的方法可能是可以解决问题,但是一定还有更好的办法。希望路过的同学可以多交流思路,多多指教。
一、情景描述
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...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。