其他分享
首页 > 其他分享> > uni-app之scroll-view组件

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.滚动区域内的每一个元素设置为行内块模块*/
	}
}

标签:滚动,app,横向,display,uni,scroll,view
来源: https://www.cnblogs.com/linhan8888/p/16415856.html