uniapp，小程序中实现文本“展开/收起“功能的最佳实践

在移动端应用开发中，文本内容的"展开/收起"功能是提升用户体验的常见设计。当列表项中包含大段文本内容时，默认只显示几行，并提供"展开"按钮让用户查看完整内容。今天我将分享如何在uniapp，小程序项目中优雅地实现这一功能。

示例

需求分析

在一个内容列表页面中，我们希望实现以下功能：

1. 默认情况下，每个列表项的内容最多显示两行
2. 超过两行的内容被隐藏，并显示"展开"按钮
3. 点击"展开"按钮后，显示全部内容，按钮变为"收起"
4. 点击"收起"按钮后，恢复到只显示两行的状态

实现思路

实现这个功能主要涉及三个方面：

1. 数据管理：追踪每个列表项的展开状态
2. 样式控制：通过CSS控制文本显示的行数
3. 交互逻辑：处理展开/收起按钮的点击事件

让我们一步步来看具体实现：

代码实现

1. HTML结构

首先，我们需要设计适当的HTML结构来容纳内容和按钮：

<view class="content-wrapper"><!-- 内容区域，绑定展开状态的类 --><view class="content-text" :class="{'expanded': expandedItems[item.id]}">{{ item.content }}</view><!-- 仅当内容超过一定长度时显示按钮 --><text v-if="item.content && item.content.length > 50" class="expand-button"@click.stop="toggleExpand(item.id)">{{ expandedItems[item.id] ? '收起' : '展开' }}</text>
</view>

2. 数据管理

在Vue组件的data中，我们使用一个对象来存储每个列表项的展开状态：

data() {return {// 其他数据...expandedItems: {} // 用对象存储每个列表项的展开状态}
}

3. 展开/收起逻辑

然后，我们需要实现切换展开状态的方法：

methods: {// 切换展开状态toggleExpand(id) {// 使用Vue的$set方法确保响应式更新this.$set(this.expandedItems, id, !this.expandedItems[id]);},// 其他方法...// 当列表数据刷新时，重置展开状态resetExpandStatus() {this.expandedItems = {};}
}

4. CSS样式

最关键的部分是使用CSS来控制文本的显示行数：

.content-text {/* 基础样式 */font-size: 30rpx;line-height: 1.6;/* 多行文本截断 */overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; /* 限制显示两行 */-webkit-box-orient: vertical;/* 展开状态的样式 */&.expanded {-webkit-line-clamp: unset; /* 取消行数限制 */display: block;}
}.expand-button {display: inline-block;margin-top: 10rpx;color: #1989fa; /* 使用你的主题色 */font-size: 26rpx;
}

优化技巧

1. 性能优化

当列表项很多时，我们需要考虑性能优化：

// 优化判断是否需要展开按钮的逻辑
needShowMoreBtn(text) {// 缓存长文本判断结果避免重复计算if (!this.textLengthCache[text]) {this.textLengthCache[text] = text && text.length > 50;}return this.textLengthCache[text];
}

2. 防止事件冒泡

如果列表项本身有点击事件，需要阻止展开按钮的点击事件冒泡：

<text @click.stop="toggleExpand(item.id)"class="expand-button"
>{{ expandedItems[item.id] ? '收起' : '展开' }}
</text>

3. 列表更新处理

当列表数据刷新时，确保展开状态被正确重置：

async loadData() {// 数据加载逻辑...if (isFirstPage) {this.resetExpandStatus(); // 重置展开状态}// 继续处理数据...
}

实际效果

实现这个功能后，我们获得了以下优势：

1. 视觉整洁：列表页面整洁一致，不会因为内容长短不一而显得凌乱
2. 节省空间：默认只显示关键信息，节省屏幕空间
3. 用户友好：用户可以根据需要自行决定是否查看更多内容
4. 性能提升：减少了初始渲染的内容量，提高了渲染性能

总结

文本内容的"展开/收起"功能是提升移动端用户体验的重要细节。通过合理的HTML结构、CSS样式和Vue的响应式特性，我们可以轻松实现这个功能。关键点在于：

1. 使用对象存储每个列表项的展开状态
2. 利用CSS的-webkit-line-clamp属性控制文本显示行数
3. 合理处理展开/收起的交互逻辑
4. 注意性能和兼容性优化

希望这篇文章对你实现类似功能有所帮助！你也可以根据自己的项目需求，对这个基础实现进行定制和扩展，打造更好的用户体验。