在小程序开发中，有时我们需要实现一个常见的功能，即“展开/收起”的效果，以便在有限的空间内展示或隐藏详细信息。本示例主要讲解如何在小程序中实现这个功能，适用于文字内容的显示控制，同时也可扩展应用于其他类型的数据。
我们需要创建HTML结构。在小程序中，我们可以使用WXML来构建页面结构。以下是一个简单的例子：
```html
<view class="container">
<view class="title">
<text class="title_txt">标题标题</text>
<image class="title_icon" src="/assets/images/arrow_up.png" />
</view>
<view class="content">
<!-- 文字内容 -->
</view>
</view>
```
在CSS样式方面，我们可以使用Less进行编写。这里，我们将标题设置为一个Flex布局，并对内容部分应用`overflow: hidden`和`text-overflow: ellipsis`来实现内容的收起效果。具体样式如下：
```less
.container {
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 25rpx;
.title_txt {
font-size: 34rpx;
color: #2b2b2b;
}
.title_icon {
display: block;
width: 21rpx;
height: 11rpx;
}
}
.content {
height: 80rpx;
overflow: hidden;
text-overflow: ellipsis;
text-overflow: -o-ellipsis-lastline;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
padding: 0 25rpx;
font-size: 30rpx;
color: #888888;
}
}
```
接下来，我们需要添加点击事件来控制展开和收起。在小程序的Page对象中，我们可以在`data`中定义一个变量`isShow`，初始值设为`false`，表示内容默认收起。同时，在箭头图标上绑定点击事件，点击时切换`isShow`的值：
```javascript
data = {
isShow: false
};
toggle() {
this.isShow = !this.isShow;
this.$apply();
}
```
在点击事件处理函数中，我们通过改变`isShow`的值来切换显示状态。在WXML中，我们可以根据`isShow`的状态动态切换图片源，并调整内容区域的样式：
```html
<image class="title_icon" src="{{isShow ? '/assets/images/arrow_down.png' : '/assets/images/arrow_up.png'}}" @tap="toggle" />
<view class="content {{isShow ? 'on' : ''}}">
<!-- 文字内容 -->
</view>
<style>
.content.on {
display: block;
text-overflow: clip;
overflow: visible;
}
</style>
```
至此，我们已经实现了基本的展开/收起效果。当`isShow`为`true`时，内容会完全显示，箭头图标也会反转；反之，内容会被隐藏，显示省略号。
为了提升用户体验，可以考虑添加过渡动画，例如使用`wx:if`和`wx:key`结合CSS动画，或者使用小程序的内置API `wx.createSelectorQuery()`来实现更复杂的交互效果。这个示例提供了一个基础的实现，开发者可以根据实际需求进行扩展和优化。
总结来说，小程序实现展开/收起效果主要包括以下步骤：
1. 创建HTML结构，设置标题和内容区域。
2. 编写CSS样式，设定内容的默认收起样式。
3. 在数据中定义控制状态的变量，并添加点击事件处理函数。
4. 根据状态动态切换样式和图片源。
5. 可选地，添加过渡动画增强交互体验。
这个功能不仅限于文字内容，还可以用于隐藏和显示其他类型的元素，如列表、图片等，为小程序界面提供更丰富的交互性。
