uni-app uni-popup textarea 内容超出不能滚动？

uni-app uni-popup textarea 内容超出不能滚动？

操作步骤：

  • uni-popup textarea 内容超出 不能滚动？

预期结果：

  • uni-popup textarea 内容超出 不能滚动？

实际结果：

  • uni-popup textarea 内容超出 不能滚动？

bug描述：

  • uni-popup textarea 内容超出 不能滚动？

| 项目信息           | 信息                   |
|--------------------|------------------------|
| 产品分类           | uniapp/App             |
| PC开发环境         | Windows                |
| PC开发环境版本号   | window10               |
| HBuilderX类型      | 正式                   |
| HBuilderX版本号    | 3.2.15                 |
| 手机系统           | Android                |
| 手机系统版本号      | Android 12             |
| 手机厂商           | 华为                   |
| 手机机型           | n10+                   |
| 页面类型           | vue                    |
| vue版本            | vue2                   |
| 打包方式           | 云端                   |
| 项目创建方式       | HBuilderX              |

更多关于uni-app uni-popup textarea 内容超出不能滚动？的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

有点无语这个设定

更多关于uni-app uni-popup textarea 内容超出不能滚动？的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于 uni-popup 的层级和样式限制导致的。uni-popup 默认会阻止页面滚动，而内部的 textarea 滚动也可能被限制。

解决方案：

  1. 为 uni-popup 启用滚动
    在 uni-popup 组件上添加 :safe-area="false" 并设置高度，允许内部滚动：

    <uni-popup ref="popup" type="bottom" :safe-area="false">
  <view class="popup-content" style="height: 60vh; overflow-y: auto;">
    <textarea auto-height placeholder="请输入内容"></textarea>
  </view>
</uni-popup>

  2. 使用 scroll-view 包裹 textarea
    如果 textarea 内容高度动态增加，可以用 scroll-view 控制滚动区域：

    <uni-popup ref="popup" type="bottom">
  <scroll-view scroll-y style="max-height: 60vh;">
    <textarea placeholder="请输入内容"></textarea>
  </scroll-view>
</uni-popup>

  3. 检查 CSS 样式
    确保没有全局样式覆盖了滚动行为，例如：

    /* 避免此类样式 */
uni-popup, .uni-popup__wrapper {
  overflow: hidden !important;
}
回到顶部