x***@outlook.com

发布：2025-01-16 09:07
更新：2025-01-16 09:11
阅读：51

【报Bug】scroll-view 无法横向滚动

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 11

HBuilderX类型：正式

HBuilderX版本号： 4.45

手机系统： Android

手机系统版本号： Android 14

手机厂商：魅族

手机机型： 20pro

页面类型： vue

vue版本： vue3

打包方式：离线

项目创建方式： HBuilderX

示例代码：

<scroll-view :scroll-x="true" :direction="'horizontal'" class="c2" style="width: 300px;background-color: aqua;height: 200px;">
<view class="i" style="width: 100px;margin-right: 120px;background-color: red;">
<text>sdsds</text>
</view>
<view class="i" style="width: 100px;margin-right: 120px;background-color: red;">
<text>sdsds</text>
</view>
<view class="i" style="width: 100px;margin-right: 120px;background-color: red;">
<text>sdsds</text>
</view>
</scroll-view>

操作步骤：

无法横向滚

预期结果：

可以横向滚动

实际结果：

不能横向滚动

bug描述：

无法横向滚动

2025-01-16 09:07 负责人:无分享

1 个回复

蔡cai

样式都不对啊，你至少在scroll-view上加个display: flex;

x***@outlook.com (作者)

</script>

<style lang="scss" scoped>

.scroll-view_H {  

    white-space: nowrap;  

    width: calc(100% - 24px);  

    height: 300px;  

    margin: 12px;  

    box-sizing: border-box;  

}  



.scroll-view-item_H {  

    display: inline-block;  

    width: calc(366px - 24px);  

    height: 300px;  

    text-align: center;  

    font-size: 36px;  

}  

.v1 {  

    background-color: pink;  

}  

.v2 {  

    background-color: red;  

}  

.v3 {  

    background-color: green;  

}

</style>

2025-01-16 09:51

蔡cai

我这试了可以滚动

2025-01-16 09:55
x***@outlook.com (作者)

回复蔡cai: 我用官方的例子试了一下在我项目也不能滚动。但是官方的hello uniapp可以滚动。我再看看。谢谢你

2025-01-16 11:31
蔡cai

回复 x***@outlook.com: 是不是有宽度还是overflow样式影响到

2025-01-16 11:35

要回复问题请先登录或注册

【报Bug】scroll-view 无法横向滚动

操作步骤：

无法横向滚

预期结果：

可以横向滚动

实际结果：

不能横向滚动

bug描述：

1 个回复

公告

相关问题

【报Bug】scroll-view 无法横向滚动

操作步骤： 无法横向滚

预期结果： 可以横向滚动

实际结果： 不能横向滚动

bug描述：

与内容相关的链接

1 个回复

公告

相关问题

操作步骤：

无法横向滚

预期结果：

可以横向滚动

实际结果：

不能横向滚动