微信开放文档中scroll-view组件的部分代码如下
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
<view id="demo1" class="scroll-view-item_H demo-text-1"></view>
<view id="demo2" class="scroll-view-item_H demo-text-2"></view>
<view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>
要实现横向滚动,只需设置以下两个:
- 父元素设置 white-space:nowrap; // 不换行
- 子元素设置 display:inline-block;
.scroll-view_H {
white-space: nowrap;
}
.scroll-view-item_H {
width: 200rpx;
height:200rpx;
background-color: #f00;
display: inline-block;
}