收藏
回答

scroll-view 组件为什么 scroll-x 不启用

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug scroll-view 工具 7.0.3 2.0.4

- 当前 Bug 的表现(可附上截图)


- 预期表现

左右可滑动

- 复现路径


- 提供一个最简复现 Demo

<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
    <view id="green" class="scroll-view-item_H bc_green"></view>
    <view id="red" class="scroll-view-item_H bc_red"></view>
    <view id="yellow" class="scroll-view-item_H bc_yellow"></view>
    <view id="blue" class="scroll-view-item_H bc_blue"></view>
  </scroll-view>


scroll-x 不启用    而scroll-y是正常的,复制官方文档事例代码也不行,是怎么回事呢?

最后一次编辑于  03-21  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 卢霄霄
    卢霄霄
    03-21

    宽度要够满屏幕后才会滚动呢 white-space:nowrap;

    03-21
    赞同
    回复 5
    • Adu
      Adu
      03-21

      谢谢回答,css部分已经写了 white-space:nowrap;  宽度也设置了 100% 依然不行,写了这个之后应该排成一行的但是 还是一列


      <scroll-view class='scroll' scroll-x>

      <view class='list a'></view>

      <view class='list b'></view>

      <view class='list c'></view>

      <view class='list d'></view>

      </scroll-view>


      .scroll{

      height: 400rpx;

      margin-top: 20rpx;

      width: 100%;

      white-space:nowrap;

      }

      .scroll .list{

      height: 400rpx;

      width:250rpx;

      }

      .scroll .a{

      background-color: red;

      }

      .scroll .b{

      background-color: blue;

      }

      .scroll .c{

      background-color: yellow;

      }

      .scroll .d{

      background-color: pink;

      }



      03-21
      回复
    • 卢霄霄
      卢霄霄
      03-21回复Adu

      view 是块级元素 和 div差不多,你要么用display:inline-block,要么弄个 display:flex的父标签

      03-21
      回复
    • Adu
      Adu
      03-21

      非常感谢您,设置display:inline-block 后问题解决了。 但是 display:flex 似乎在 scroll-view 上不起用  非常感谢

      03-21
      回复
    • Adu
      Adu
      03-21

      初次学习这个 还有很多不懂的

      03-21
      回复
    • 卢霄霄
      卢霄霄
      03-21回复Adu

      scroll-view里包个view,然后再包你的那些view里,在这个外层view上写display:flex

      03-21
      回复