在微信小程序中如果想实现内容滚动,需要使用 scroll-view 组件
scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用户可以通过手指滑动或者点击滚动条滚动内容。
scroll-x | 允许横向滚动 |
scroll-y | 允许纵向滚动 |
实现横向/纵向滚动方式:
<!-- 实现横向滚动 -->
<scroll-view class="scroll-x" scroll-x><view>1</view><view>2</view><view>3</view>
</scroll-view>
<!-- 实现纵向滚动 -->
<scroll-view class="scroll-y" scroll-y><view>1</view><view>2</view><view>3</view>
</scroll-view>
.scroll-x {width: 100%;white-space: nowrap;background-color: skyblue;view {display: inline-block;width: 300rpx;height: 80rpx;&:last-child {background-color: lightcoral;}&:first-child {background-color: lightseagreen;}}
}
.scroll-y {height: 400rpx;background-color: blue;margin-top: 10rpx;view {height: 400rpx;&:last-child {background-color: lightcoral;}&:first-child {background-color: lightseagreen;}}
}