uni-app 多行文本展开收起

在uni-app中实现多行文本的展开和收起功能，通常涉及到动态控制文本显示的内容和高度。下面是一个简单的示例代码，展示了如何实现这一功能。

首先，在pages/index/index.vue文件中，我们可以设置如下结构和逻辑：

<template>
  <view class="container">
    <view class="text-box" :style="{ height: isExpanded ? 'auto' : textHeight + 'px' }">
      <text>{{ truncatedText }}</text>
    </view>
    <view class="toggle-btn" @click="toggleText">
      {{ isExpanded ? '收起' : '展开' }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fullText: '这是一段多行文本，用于展示展开和收起的功能。当文本很长时，可以通过点击按钮来展开或收起。',
      truncatedText: '',
      textHeight: 0,
      isExpanded: false,
    };
  },
  mounted() {
    this.calculateTextHeight();
    this.truncatedText = this.truncateText(this.fullText, 3); // 初始显示3行
  },
  methods: {
    truncateText(text, lineCount) {
      let truncated = text.split('\n').slice(0, lineCount).join('\n');
      if (text.split('\n').length > lineCount) {
        truncated += '...';
      }
      return truncated;
    },
    calculateTextHeight() {
      const tempText = document.createElement('text');
      tempText.innerText = this.fullText;
      tempText.style.fontSize = '16px'; // 根据实际字体大小设置
      tempText.style.lineHeight = '1.5'; // 根据实际行高设置
      document.body.appendChild(tempText);
      this.textHeight = tempText.offsetHeight;
      document.body.removeChild(tempText);
    },
    toggleText() {
      this.isExpanded = !this.isExpanded;
      if (this.isExpanded) {
        this.truncatedText = this.fullText;
      } else {
        this.truncatedText = this.truncateText(this.fullText, 3); // 展开后再次收起显示3行
      }
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}
.text-box {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 初始显示3行 */
  -webkit-box-orient: vertical;
}
.toggle-btn {
  margin-top: 10px;
  text-align: center;
}
</style>

在这个示例中，truncateText方法用于截取文本，calculateTextHeight方法用于计算完整文本的高度（这里使用了DOM操作，需要注意在uni-app中跨平台兼容性）。toggleText方法控制文本的展开和收起状态。

注意：在uni-app中使用DOM操作需要谨慎，尤其是在小程序端可能会有限制。上述示例主要用于H5端展示，如果在小程序中使用，可以考虑使用固定高度和滚动视图来实现类似功能。