(一)横向滚动、纵向滚动
scroll-x scroll-y
<view><view class="box"><!-- 纵向滚动 --><scroll-view class="wrapper" scroll-y><view id="1" class="view demo-1">A</view><view id="2" class="view demo-2">B</view><view id="3" class="view demo-3">C</view></scroll-view><!-- 横向滚动 --><scroll-view class="x-wrapper" scroll-x><view id="1" class="view demo-1">A</view><view id="2" class="view demo-2">B</view><view id="3" class="view demo-3">C</view></scroll-view></view>
</view>
同时配合css
.view {height: 400px;width: 100%;/* 必须是 inline-block 给父元素设置display: flex 不好使 */display: inline-block;
}.demo-1 {background: red;
}.demo-2 {background: green;
}.demo-3 {background: yellow;
}.wrapper {height: 500px;
}.x-wrapper {white-space: nowrap;height: 400px;margin: 100px 0;
}
(二)scroll-into-view