uniapp开始小程序判断文本的行数文本高度显示展开

最新推荐文章于 2024-07-04 22:22:07 发布

原创

最新推荐文章于 2024-07-04 22:22:07 发布 · 1.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文介绍了如何在UniApp开发的小程序中，通过JavaScript计算文本内容的行数并根据行数决定是否显示展开按钮，实现文本高度的动态展示。

uniapp开始小程序判断文本的行数文本高度显示展开

比如：在显示一段“描述”文本时，文本的行数可能因为不同的字符（英文或中文）而无法确定。这时可通过判断该区域的高度来决定是否显示‘展开’按钮。

代码：

<template>
  <view class="container">
    <view class="content" ref="contentRef">
      <!-- 这里是你的文本内容 -->
      {
  
  { yourText }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      yourText: '这里是你的文本内容'
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.checkTextLines();
    });
  },
  methods: {
    checkTextLines() {
      // 获取 <div> 标签的节点信息
      const query = uni.createSelectorQuery().in(this);
      query.select('.content').boundingClientRect(data => {
        // 获取文本内容的高度
        const height = data.height;
        // 假设行高为20px
        const lineHeight = 20;
        // 计算文本行数
        const lines = Math.ceil(height / lineHeight);
        // 判断文本行数是否达到了3行
        if (lines >= 3) {
          console.log("文本达到了3行