uni-app swiper中的grid弹出popup弹出层在pc上有滚动条，但是在手机web端没有

uni-app swiper中的grid弹出popup弹出层在pc上有滚动条，但是在手机web端没有

项目属性 值
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 3.2.3
浏览器平台 Chrome
浏览器版本 92.0.4515.159
项目创建方式 HBuilderX

操作步骤：

在swiper中添加uni-grid，uni-grid-item中的元素点击后的弹出层，我用的是popup的基本示例中的居中弹出。

预期结果：

在pc和手机web中的弹出层都可以有滚动条

实际结果：

只有pc有滚动条

bug描述：

swiper中的grid弹出popup弹出层在pc上有滚动条，但是在手机web端没有


更多关于uni-app swiper中的grid弹出popup弹出层在pc上有滚动条，但是在手机web端没有的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app swiper中的grid弹出popup弹出层在pc上有滚动条，但是在手机web端没有的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于移动端浏览器对滚动条处理的差异导致的。在PC端，浏览器默认会显示滚动条，而移动端浏览器通常会隐藏滚动条以提供更好的触控体验。

针对你的情况，可以尝试以下解决方案：

  1. 强制显示滚动条： 在弹出层的CSS中添加以下样式：

    .popup-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
}

  2. 检查弹出层高度： 确保弹出层有明确的高度限制，这样内容超出时才会出现滚动条：

    .popup-content {
    max-height: 60vh;
    overflow-y: auto;
}

  3. 使用uni-app的scroll-view组件： 将弹出层的内容包裹在scroll-view中：

    <uni-popup>
    <scroll-view scroll-y="true" style="height: 400rpx;">
        <!-- 你的内容 -->
    </scroll-view>
</uni-popup>
回到顶部