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 这个问题吗?
给scroll-view 加以下样式 width: 100%;white-space: nowrap; 子元素display：inline-block；可以实现横向滚动
Thanks, your solution is perfect.
每个子元素设置成
display: inline-flex;
你好，没看到你的样式呀？
index.wxss:
.bc_green {background: green;width:100px; height: 100px;}.bc_red {background: red;width:100px; height: 100px;}.bc_blue {background: blue;width:100px; height: 100px;}.bc_yellow{background: yellow;width:100px;height: 100px;}感谢你的回复，我觉得这个问题应该是scroll-view属性的问题，和样式应该没有关系吧. 如果说scroll-view水平显示是通过wxss样式渲染的话，我觉得提供scroll-x property的意义不大。
里面的item有设为display：inline-block吗？