小程序Text展开收起之微动画

2023-05-05 09:54:27

在小程序中优雅地实现文本展开收起功能

概述

在小程序开发中，经常需要处理文本内容过长的情况，此时为避免页面布局混乱，通常会通过省略号（...）的方式进行文本截断处理。但有时，我们又需要实现文本的展开收起功能，以便用户可以查看完整内容。本文将详细介绍如何利用微信小程序提供的特性，实现文本展开收起功能，并结合微动画效果提升用户体验。

问题分析

文本超长时，通过省略号截断后，剩余的文本高度被隐藏，仅显示在视图内的高度。因此，实现展开收起功能的关键是如何在显示省略号的同时，让剩余文本在需要时展开。

解决方案

1. 使用 wx:if 条件渲染

我们可以利用 wx:if 条件渲染控制文本的显示和隐藏。当文本超长时，显示省略号并同时显示一个展开按钮；当文本正常显示时，隐藏省略号和展开按钮。

<view class="text-container">
  <text wx:if="{{ isCollapsed }}">{{ text | truncate }}</text>
  <text wx:else>{{ text }}</text>
  <button wx:if="{{ isCollapsed }}" class="expand-button" bindtap="expandText">展开</button>
</view>

2. 使用 transition 实现微动画

为了让展开收起功能更加流畅自然，我们可以使用 transition 实现微动画效果。当用户点击展开按钮时，文本以动画形式展开；当用户点击收起按钮时，文本以动画形式收起。

.text-container {
  transition: height 0.3s ease-in-out;
}

.text-container[is-collapsed] {
  height: 200px;
}

.text-container:not([is-collapsed]) {
  height: auto;
}

3. 完整代码示例

<view class="text-container" :is-collapsed="isCollapsed">
  <text wx:if="isCollapsed">{{ text | truncate }}</text>
  <text wx:else>{{ text }}</text>
  <button wx:if="isCollapsed" class="expand-button" bindtap="expandText">展开</button>
</view>

.text-container {
  transition: height 0.3s ease-in-out;
}

.text-container[is-collapsed] {
  height: 200px;
}

.text-container:not([is-collapsed]) {
  height: auto;
}

import { truncate } from '@小程序/utils';

Page({
  data: {
    text: '这是一段很长的文本，需要进行省略号处理。',
    isCollapsed: true,
  },

  methods: {
    expandText() {
      this.setData({
        isCollapsed: false,
      });
    },
  },
});