微信小程序scroll-view横向滚动

最新推荐文章于 2025-09-20 14:11:57 发布

原创最新推荐文章于 2025-09-20 14:11:57 发布 · 905 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #notepad++ #小程序

文章讲述了在微信开发中，如何使用scroll-view实现横向滚动并解决因enable-flex导致的滚动条长度不准确的问题，尤其是在子节点高度差异较大的情况下。

scroll-view | 微信开放文档

当我们使用scroll-view横向滚动时，添加 scroll-x 页面内容仍然没有横向展示

解决：

横向滚动需打开 enable-flex 以兼容 WebView，如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>
滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确

<scroll-view class="scroll-view_H" scroll-x enable-flex>
    <view id="demo1" class="scroll-view-item_H demo-text-1"></view>
    <view id="demo2"  class="scroll-view-item_H demo-text-2"></view>
    <view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>