scroll-view——小程序横向滚动

这是官方给的布局代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

< view  class="section">    < view  class="section__title">vertical scroll</ view >    < scroll-view  scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">      < 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 >      < view  class="btn-area">      < button  size="mini" bindtap="tap">click me to scroll into view </ button >      < button  size="mini" bindtap="tapMove">click me to scroll</ button >    </ view > </ view > < 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没有进行描述，要想横向滚动，首先要先把子元素设置成一行，发现float不能用

要对子元素进行display:inline-block ,容器进行 white-space: nowrap;

css如下：

1 2 3 4 5 6 7 8 9

.scroll-view_H{    width :  100% ;    white-space :  nowrap ; } .scroll-view-item_H{    width :  200px ;    height :  100px ;    display : inline- block ;