Taro多行文本最多展示5行，超出“查看更多”展示，点击弹层

本文主要是介绍Taro多行文本最多展示5行，超出“查看更多”展示，点击弹层，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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);};

示例图如下

这篇关于Taro多行文本最多展示5行，超出“查看更多”展示，点击弹层的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---