这是官方给的布局代码
|
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
;
|