uniapp实现（局部页面）横向滚动

最新推荐文章于 2024-05-23 14:32:45 发布

起飞冲

最新推荐文章于 2024-05-23 14:32:45 发布

阅读量517

点赞数

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/qq_16254121/article/details/132418960

版权

摘自uniapp官方文档

结构部分：

<view>
 <scroll-view class="scroll-view_H" scroll-x="true"  scroll-left="120">
	<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
	<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
	<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
 </scroll-view>
</view>

样式部分

.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}
		.scroll-view-item {
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}
		.scroll-view-item_H {
			display: inline-block;
			width: 100%;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
			font-size: 36rpx;
		}