Scroll-View 组件的scroll-x属性不起作用
发布于 5 年前 作者 yangtao 15870 次浏览 来自 问答

When using “scroll-y” property within the scroll-view component, the image shows as below:

the code as below:

<scroll-view class="" scroll-y style="height:250px;">
  <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>

When using "scroll-x"property within the scroll-view component, the image shows as below (same result as above):

the code as below:

<view class="section section_gap">
  <view class="section__title">horizontal scroll</view>
  <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>
</view>

有人可以帮助solve 这个问题吗?

3 回复

你好,没看到你的样式呀?

每个子元素设置成

display: inline-flex;

给scroll-view 加以下样式  width: 100%;white-space: nowrap;  子元素display:inline-block;可以实现横向滚动

回到顶部