uniapp 如何实现文字超出dom才设置滚动

在 UniApp 中，要实现文字内容超出 DOM 容器时自动设置滚动，你可以通过 CSS 和 Vue 的 `v-for` 或者模板动态渲染结合来进行。这里是一个基本步骤：

1. **CSS**:
首先，你需要给包含文字的元素设置一个固定的宽度，并使其变为 `overflow-y: auto;` 来启用垂直滚动条。例如，如果你有一个 `.content` 类的 div，可以这样做：

   <div class="content" v-bind:class="{ 'scroll-enabled': hasOverflow }">
       <!-- 文字内容 -->
   </div>

然后在 CSS 文件中添加样式:

   .scroll-enabled {
     overflow-y: auto;
     height: auto; /* 如果不是固定高度，可以根据需要调整 */
   }

2. **Vue 组件内部逻辑**:
在你的 Vue 组件中，创建一个 computed 属性 `hasOverflow`，检查内容的实际高度是否超过容器的高度：

   export default {
     data() {
       return {
         contentData: [], // 这里假设你有文字数据列表
         containerHeight: 0, // 存储实际可视区域高度
       };
     },
     computed: {
       hasOverflow() {
         if (this.contentData.length > 0) {
           const totalHeight = this.contentData.reduce((sum, item) => sum + item.offsetHeight, 0);
           return totalHeight > this.containerHeight;
         }
         return false;
       }
     },
     mounted() {
       // 初始化时计算容器高度
       this.containerHeight = this.$refs.content.scrollHeight;
     },
     watch: {
       '$data.contentData'() { // 当内容数据变化时更新高度
         this.containerHeight = this.$refs.content.scrollHeight;
       }
     },
   }

3. **HTML 结构**:
在你的 HTML 上绑定 `class` 到这个计算属性上，并引用对应的 DOM 元素，如 `<div ref="content">...</div>`。

这样，当内容超出容器时，`.content` 就会显示滚动条。记得替换 `contentData` 和相关的节点引用以适应你的实际情况。