Uniapp多行文本展开或收起

Uniapp是一款跨平台开发工具，可以方便地开发出支持H5、微信小程序等多个平台的应用。在开发过程中，我们可能会遇到需要展开或收起多行文本的场景。本文将介绍如何实现多行文本展开或收起的功能，并提供了兼容H5和微信小程序的示例代码。

1. 实现思路

要实现多行文本展开或收起的功能，我们需要做以下几个步骤：

1. 判断文本是否溢出到多行；
2. 如果溢出，则显示省略号，同时提供一个“展开”按钮；
3. 点击展开按钮时，显示全部文本，并提供一个“收起”按钮；
4. 点击收起按钮时，显示省略号，同时隐藏“收起”按钮。

2. 示例代码

下面给出了一个基于Vue的示例代码，实现了上述的功能，并兼容H5和微信小程序。

<template>
  <view class="container">
    <view class="content" :style="contentStyle">
      {{ showContent ? fullContent : partialContent }}
    </view>
    <button v-if="!showContent" @click="showContent = true" class="expand-button">展开</button>
    <button v-else @click="showContent = false" class="collapse-button">收起</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showContent: false,
      maxLines: 3,
      partialContent: '这里是部分内容...',
      fullContent: '这里是完整内容...',
    };
  },
  computed: {
    contentStyle() {
      return {
        '-webkit-line-clamp': this.showContent ? 'none' : this.maxLines,
        '-webkit-box-orient': 'vertical',
        overflow: 'hidden',
        display: '-webkit-box',
        '-webkit-box-orient': 'vertical',
      };
    },
  },
};
</script>

<style>
.container {
  padding: 20rpx;
}

.content {
  font-size: 34rpx;
  line-height: 48rpx;
}

.expand-button,
.collapse-button {
  background-color: #007aff;
  color: #fff;
  font-size: 28rpx;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  margin-top: 20rpx;
}

.collapse-button {
  background-color: #ff3b30;
}
</style>

3. 效果说明

以上示例代码中，我们通过v-if和v-else指令来根据showContent的值来切换展示内容。通过设置contentStyle的-webkit-line-clamp属性来控制文本的行数，并通过设置overflow和display属性来实现文本的溢出隐藏和省略号显示。点击按钮时，改变showContent的值，从而触发视图的更新。

需要注意的是，由于微信小程序只支持部分Web样式属性，所以需要使用-webkit-前缀来兼容。而H5则不需要。

4. 总结

通过上述的实现思路和示例代码，我们可以很方便地在Uniapp中实现多行文本展开或收起的功能。这种功能在聊天对话框、新闻列表等场景中非常常见，可以提高用户体验并节省页面空间。

希望本文对你在Uniapp开发中有所帮助，如果有任何疑问或问题，欢迎留言讨论。感谢阅读！