Taro中,页面需求:
多行文本,展示最多展示5行,超出5行,展示“查看更多”按钮,点击弹层展示文本详细信息。
弹层代码就不说了,着重说一下怎么获取区域高度~
1.区域设置max-height,用于控制展示区域,最多5行
2.文本区域设置id名称,通过createSelectorQuery方法获取区域高度
3.文本设置line-height高度,乘以5
4.超出则说明文本展示已高于5行
initPageHeight = () => {setTimeout(() => {if (process.env.TARO_ENV === 'weapp') {createSelectorQuery().select('#ruleText').boundingClientRect((res) => {if (res) {const lineHeight = getPx(36);//默认展示5行,点击查看更多this.setState({ showMore: res.height > lineHeight * 5 });} else {this.initPageHeight();}}).exec();} else if (process.env.TARO_ENV === 'alipay') {const query = createSelectorQuery();query.select('#ruleText').boundingClientRect();query.exec((res) => {const height = res?.[0]?.height;if (height) {const lineHeight = getPx(36);this.setState({ showMore: res.height > lineHeight * 5 });}});}}, 400);};
示例图如下