竖向滚动
index.wxml
<scroll-view class="scroll-view" scroll-y="true">
<view class="view-A">A</view>
<view class="view-B">B</view>
<view class="view-C">C</view>
</scroll-view>
index.wxss
.scroll-view {
height: 100px;
width: 100%;
text-align: center;
line-height: 100px;
}
.view-A {
background-color: aquamarine;
}
.view-B {
background-color: burlywood;
}
.view-C {
background-color: cadetblue;
}
视图默认竖向排列
- scroll-y
将 scroll-y属性设置为"true"
横向滚动
index.wxml
<scroll-view class="scroll-view" scroll-x="true">
<view class="view-A">A</view>
<view class="view-B">B</view>
<view class="view-C">C</view>
</scroll-view>
index.wxss
.scroll-view {
width: 100%;
white-space: nowrap;
}
.view-A {
height: 100px;
width: 100%;
line-height: 100px;
text-align: center;
background-color: aquamarine;
display: inline-block;
}
.view-B {
height: 100px;
width: 100%;
line-height: 100px;
text-align: center;
background-color: burlywood;
display: inline-block;
}
.view-C {
height: 100px;
width: 100%;
line-height: 100px;
text-align: center;
background-color: cadetblue;
display: inline-block;
}
需要注意两点:
-
white-space: nowrap;
-
display: inline-block;