微信小程序 scroll-view设置scroll-x无法横向显示和滑动的解决方案

呦，写bug呢

已于 2023-05-31 13:21:34 修改

阅读量1.3k

点赞数

分类专栏：小程序文章标签：微信小程序小程序

于 2023-05-31 11:05:38 首次发布

本文链接：https://blog.csdn.net/wshpwangshiyu/article/details/130964682

版权

小程序专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在微信小程序中，仅设置scroll-x无法让内容横向滑动，需要结合CSS样式white-space:nowrap和display:inline-block或display:flex来实现。通过nowrap避免换行，使用inline-block或flex让子元素横向排列，从而创建可滚动的横向列表。

摘要由CSDN通过智能技术生成

<scroll-view scroll-x class="moduleView">
    <view class="modulItemView">1</view>
    <view class="modulItemView">2</view>
    <view class="modulItemView">3</view>
</scroll-view>

仅仅设置 scroll-x无法实现横向排列和滑动？还需在scroll-view和子view的wxss样式里进行如下设置

.moduleView {
    white-space:nowrap;
}

.modulItemView{
    display: inline-block;
}

如果想在子view里使用弹性布局 display:flex ，也可以这样：

<scroll-view scroll-x class="moduleView">
     <view style="display:flex; flex-direction:row;">
         <view class="modulItemView">1</view>
         <view class="modulItemView">2</view>
         <view class="modulItemView">3</view>
     </view>

</scroll-view>


.moduleView {
    white-space:nowrap;
}