小程序如何通过scroll

发布网友 发布时间：2022-08-04 07:51

我来回答

共1个回答

热心网友 时间：2024-12-12 19:38

为了方便你复制，我把代码复制到下面了：

横向拖动 注意参数：scroll-x="true" style="white-space: nowrap;width: 100%;display: flex"> display: inline-block

<scroll-view scroll-y="true" style="height: 200px">

<scroll-view scroll-x="true" style="white-space: nowrap;width: 100%;display: flex">

<view id="green" class="scroll-view-item_H bc_green;display: inline-block"></view>

<view style="background:yellow;width:300rpx;height:300rpx;display: inline-block"></view>

<view style="background:red;width:300rpx;height:300rpx;display: inline-block"></view>

<view style="background:blue;width:300rpx;height:300rpx;display: inline-block"></view>

</scroll-view>

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" >

<!-- display: inline-block-->

<view style="background: red; width: 200rpx; height: 100rpx; display: inline-block" ></view>

<view style="background: green; width: 200px; height: 100rpx; display: inline-block"></view>

<view style="background: blue; width: 200rpx; height: 100rpx; display: inline-block"></view>

<view style="background: yellow; width: 200rpx; height: 100rpx; display: inline-block"></view>

</scroll-view>

纵向拖动

<scroll-view scroll-y="true" style="height: 200px">

<view style="background: red; width: 100px; height: 100px" ></view>

<view style="background: green; width: 100px; height: 100px"></view>

<view style="background: blue; width: 100px; height: 100px"></view>

<view style="background: yellow; width: 100px; height: 100px"></view>

</scroll-view>