wx代码

<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>

css代码

.section_gap{

}

.scroll-view_H{

display: block;

width: 100%;

flex-wrap: nowrap;

}

.scroll-view-item_H{

width: 200px;

height: 100px;

flex-wrap: nowrap;

}

.bc_green{

background: green;

}

.bc_red{

background: red;

}

.bc_yellow{

background: yellow;

}

.bc_blue{

background: blue;

}

效果