在uni-app中使用<rich-text>组件显示长代码时，若希望在安卓设备上支持横向滚动，确实会遇到一些挑战，因为<rich-text>组件对CSS样式的支持有限，特别是针对overflow-x属性的支持。不过，我们可以通过一些变通的方法来实现这个需求。

一种可行的方案是使用自定义的滚动容器来包裹代码内容，并手动处理滚动行为。这里提供一个基于uni-app的代码示例，展示如何通过嵌套<scroll-view>组件来实现横向滚动。

示例代码

1. 页面模板 (index.vue)

<template>
  <view class="container">
    <scroll-view scroll-x="true" class="code-container">
      <view class="code-wrapper">
        <!-- 使用文本节点渲染长代码 -->
        <rich-text :nodes="codeNodes"></rich-text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      codeNodes: [
        {
          name: 'p',
          attrs: {},
          children: [
            {
              type: 'text',
              text: '这是非常长的代码示例，用于测试横向滚动功能。这里包含了很多字符，以验证滚动效果。' +
                    'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+[]{}|;:,.<>?/\\~`'
            }
          ]
        }
      ]
    };
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.code-container {
  width: 100%; /* 根据需要调整 */
  white-space: nowrap; /* 防止内容换行 */
}
.code-wrapper {
  display: inline-block; /* 保持内容在一行 */
  padding: 10px; /* 可选，增加内边距 */
  background-color: #f5f5f5; /* 可选，设置背景色 */
}
</style>

说明

• <scroll-view>：使用scroll-x="true"属性启用横向滚动。
• <rich-text>：用于渲染代码内容，这里通过nodes属性动态绑定代码文本。
• CSS样式：.code-container设置为white-space: nowrap;确保内容不会换行，.code-wrapper设置为display: inline-block;使其内容在一行内展示。

这种方法利用了<scroll-view>组件的滚动特性，并通过CSS样式确保内容在一行内展示，从而实现了在安卓设备上对长代码的横向滚动支持。注意，这种方法可能需要根据具体需求调整样式和布局。