uni-app之scroll-view组件

uni-app使用scroll-view组件不生效的问题

1.横向滚动不生效的问题是因为少了两行代码:
white-space: nowrap;
display:inline-block;

2.纵向滚动 必须指定滚动区域的高度。
不设置高度的话,scroll-view是不会滚动的,此时滚的是页面。

<scroll-view class="classify" scroll-x show-scrollbar>
	<view class="classify_item" v-for="(item,index) in classifyList" :key="index">
		{{item}}
	</view>
</scroll-view>

.classify{
	width: 100%;
	height: 60upx;
	display: flex;
	flex-direction: row;
	white-space: nowrap; /*横向滚动必须添加css 1.规定段落中得文本不进行换行*/
	.classify_item{
		overflow: hidden;
		background-color: #DD524D;
		margin: 2upx;
		width: 130upx;
		height 50upx;
		display: inline-block; /*横向滚动 2.滚动区域内的每一个元素设置为行内块模块*/
	}
}
posted @ 2022-06-27 13:52  寒冷的雨呢  阅读(1095)  评论(0编辑  收藏  举报