微信小程序从16年开始出现，近两年划分到前端领域中，小程序的编写过程中，与原生、前端、安卓、ios、后端语言都不相同，拥有独立的标签，官方说基于react开发，但是使用过程中与vue有很大相似。
<!-- 竖向滚动条 -->
<scroll-view scroll-y style="height: 200px;">
<view id="green" class="scroll-view-item bc_green"></view>
<view id="red" class="scroll-view-item bc_red"></view>
<view id="yellow" class="scroll-view-item bc_yellow"></view>
<view id="blue" class="scroll-view-item bc_blue"></view>
</scroll-view>
添加好样式之后
.scroll-view-item{
height:200rpx
}
#green{
background: green
}
#yellow{
background: yellow
}
#blue{
background: blue
}
#red{
background: red
}
正常使用官网的左右滚动条时
<!-- 横向滚动条 -->
<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-view-item_H{
height:400rpx;
width:200rpx
}
这时候的样式为： 我们可以使用浮动float:left，使元素横向排列,会发现没有效果。 我们可以再试着使用弹性盒display:flex； flex-direction: row; 你会发现还是不可以
这时候你可以试着给父元素加 white-space: nowrap;
每个子元素加上样式display:inline-block; 这时候你在刷新页面就可以了
