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

文章目录

- 示例
- 需求分析
- 实现思路
- 代码实现
- - [1. HTML结构](#1. HTML结构)
  - [2. 数据管理](#2. 数据管理)
  - [3. 展开/收起逻辑](#3. 展开/收起逻辑)
  - [4. CSS样式](#4. CSS样式)
- 优化技巧
- - [1. 性能优化](#1. 性能优化)
  - [2. 防止事件冒泡](#2. 防止事件冒泡)
  - [3. 列表更新处理](#3. 列表更新处理)
- 实际效果
- 总结

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

示例

需求分析

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

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

实现思路

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

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

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

代码实现

1. HTML结构

首先，我们需要设计适当的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中，我们使用一个对象来存储每个列表项的展开状态：

javascript 复制代码

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

3. 展开/收起逻辑

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

javascript 复制代码

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

4. CSS样式

最关键的部分是使用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. 性能优化

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

javascript 复制代码

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

2. 防止事件冒泡

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

html 复制代码

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

3. 列表更新处理

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

javascript 复制代码

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

实际效果

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

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

总结

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

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

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