微信小程序组件scroll-view无法横向滚动问题

最新推荐文章于 2024-08-02 14:03:28 发布

苏喂苏喂苏喂su

最新推荐文章于 2024-08-02 14:03:28 发布

阅读量3.8k

点赞数 2

分类专栏：微信小程序文章标签：小程序组件 scroll-view

本文链接：https://blog.csdn.net/joyvonlee/article/details/88386406

版权

微信小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

当我们使用scroll-view组件的时候，通常按文档上的说明进行操作，也就是将scroll-x="true"来设置允许横向滚动的时候，其实只设置这里还是不够的。此时我们打开调试器查看会发现组件的子元素并没有在一行显示，而是自动换行了，此时即使是将父元素的宽度加大，也是一样无法进行横向滚动。解决的办法就是将父元素容器的display设为flex弹性布局，然后设置不允许换行white-space：nowrap；这样问题就解决了。下面贴上代码

<scroll-view class='top100content' scroll-x="true">
    <view class="top100item"></view>
</scroll-view>

.top100content {
  width: 100%;
  height: 470rpx;
  display: flex;
  white-space: nowrap;
}


.top100item{
  width: 300rpx;
  height: 470rpx;
  box-sizing: border-box;
  margin: 0 20rpx;
  display: inline-block;
}