uniapp 展开收齐文本

### 实现 UniApp 文本展开和收起

在 UniApp 中实现文本的展开和收起效果可以通过多种方式达成。一种常见的方式是通过 CSS 控制显示的高度并配合 JavaScript 来切换状态。

#### 使用 Vue 的 `v-if` 和 `v-show`

可以利用 Vue 提供的状态管理来控制文本是否完全展示：

<template>
  <view class="text-container">
    <text v-if="isExpanded">{{ longText }}</text>
    <text v-else>{{ shortText }}</text>
    <button @click="toggleExpand"> {{ isExpanded ? '收起' : '展开' }} </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,
      longText: "一段比较长的文字",
      shortText: "点这试试一段比较短的文字"
    };
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded;
    }
  }
};
</script>

这种方式简单明了，适合用于简单的场景[^1]。

#### 动态调整样式以适应不同设备

对于更复杂的布局需求，可能需要动态计算内容区域的实际尺寸，并据此设置容器的最大高度属性。此过程涉及到了解 DOM 元素的具体几何信息：

// 在获取数据之后立即执行
this.$nextTick(() => {
  const query = uni.createSelectorQuery();
  query.select('.content').boundingClientRect((rect) => {
    if (rect) {
      console.log(`元素高度为:${rect.height}`);
      // 可在此处根据 rect.height 设置最大高度或其他逻辑处理
    }
  }).exec();
});

这段代码展示了如何查询特定节点的信息，在实际应用中可以根据这些信息进一步优化用户体验[^3]。

#### 多行文字环绕效果

针对多行文本的特殊格式化需求，比如希望点击按钮后不仅改变可见范围还保持良好的视觉连续性，则需考虑采用专门设计过的 CSS 解决方案。不过需要注意的是某些手机型号可能存在兼容性问题，因此建议充分测试后再决定最终实施方案[^2]。