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);
};
示例图如下