当前位置: 代码迷 >> 综合 >> (六)scroll-view 组件
  详细解决方案

(六)scroll-view 组件

热度:19   发布时间:2024-02-09 13:20:23.0

(一)横向滚动、纵向滚动

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

 

  相关解决方案