uniapp 如何实现显示5行内容并展开显示更多功能

在uniapp中如何实现默认只显示5行文本内容，并提供一个"展开更多"按钮来显示完整内容？需要兼容不同机型的文本行数计算，最好能给出具体代码示例和实现思路。

2 回复

在uniapp中，可以通过以下步骤实现：

  1. 使用v-if或v-show控制显示行数
  2. 设置一个变量控制展开状态
  3. 使用text-overflow: ellipsis限制显示行数
  4. 添加"展开/收起"按钮切换状态

示例代码：

<view>
  <text :class="isExpand ? '' : 'text-limit'">{{content}}</text>
  <text @click="isExpand = !isExpand">{{isExpand ? '收起' : '展开更多'}}</text>
</view>

<style>
.text-limit {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>

在 UniApp 中，可以通过以下步骤实现显示5行内容并展开显示更多功能：

实现思路

  1. 使用 CSS 限制文本显示行数（5行）。
  2. 通过变量控制展开/收起状态。
  3. 添加“展开/收起”按钮切换显示状态。

代码示例

<template>
  <view class="content-box">
    <!-- 文本内容 -->
    <text class="content-text" :class="{ 'expanded': isExpanded }">
      {{ content }}
    </text>
    
    <!-- 展开/收起按钮 -->
    <text class="toggle-btn" @click="toggleExpand">
      {{ isExpanded ? '收起' : '展开更多' }}
    </text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isExpanded: false,  // 控制展开状态
      content: '这里是你的长文本内容...'  // 示例内容
    }
  },
  methods: {
    toggleExpand() {
      this.isExpanded = !this.isExpanded
    }
  }
}
</script>

<style scoped>
.content-box {
  padding: 20rpx;
}

/* 默认显示5行 */
.content-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;  /* 限制5行 */
  overflow: hidden;
  line-height: 1.5;
}

/* 展开状态取消行数限制 */
.content-text.expanded {
  -webkit-line-clamp: unset;
}

.toggle-btn {
  color: #007AFF;
  margin-top: 10rpx;
  display: block;
  cursor: pointer;
}
</style>

关键点说明

  • CSS 控制行数：使用 -webkit-line-clamp: 5 限制显示5行
  • 状态切换：通过 isExpanded 变量控制展开/收起
  • 动态类名：根据状态添加 .expanded 类取消行数限制
  • 按钮文本：根据状态显示“展开更多”或“收起”

注意事项

  • 确保文本容器有明确的宽度
  • 如果内容不足5行，可以隐藏展开按钮
  • 可根据需要调整行高和间距

这种方法简单高效，适用于大多数文本展开收起场景。

回到顶部