uniapp 富文本查看更多

在 UniApp 中实现富文本查看更多的功能可以通过以下步骤：

1. 首先，你需要在你的页面中引入 `rich-text` 组件来显示富文本内容。例如，在你的页面的 `template` 中添加以下代码：

<template>
  <view>
    <rich-text :nodes="content" v-if="showAll"></rich-text>
    <rich-text :nodes="shortContent" v-else></rich-text>
    <view class="toggle-button" @tap="toggleShowAll">
      {{ showAll ? '收起' : '查看更多' }}
    </view>
  </view>
</template>

2. 在页面的 `script` 中，你需要定义 `content` 和 `shortContent` 变量来存储完整的富文本内容和截断后的富文本内容。例如：

<script>
export default {
  data() {
    return {
      content: '',
      shortContent: '',
      showAll: false
    }
  },
  methods: {
    toggleShowAll() {
      this.showAll = !this.showAll;
    }
  },
  mounted() {
    // 获取富文本内容，假设你已经有了一个名为 `htmlContent` 的变量
    this.content = htmlContent;

    // 截取部分内容作为简短内容显示
    const maxLength = 100;
    this.shortContent = this.content.substring(0, maxLength) + '...';
  }
}
</script>

3. 最后，你可以为 "查看更多" 的按钮添加点击事件，通过修改 `showAll` 变量的值来切换显示完整内容和简短内容。

这样，当页面加载完成时，会自动显示简短的富文本内容，并在点击 "查看更多" 按钮后展开完整的富文本内容。