uniapp中scroll横向滚动不容易正常显示


通常商城中会有滑动的菜单,一般都是横向的。

使用uniapp开发常用scroll-view组件。

<view class="scroll-view-box">
	<scroll-view class="scrollView"             scroll-x="true"     scroll-with-animation>
	    <view class="item-box"  >
	    	<view id="demo1" class="item">
	    	</view>
	    </view>
	</scroll-view>
</view>
.scrollView{
	height: 297rpx;
	width: 750rpx;
	white-space: nowrap;
	text-align:center;
	overflow: hidden;
	.item-box{
		display:inline-block;
		.item{
			margin-left: 20rpx;
			display:flex;
			flex-direction: column;
		}
	}
}

其中 white-space: nowrap; 要添加到 scroll-view标签上
并且要声明宽高
内部第一个标签为其中的item项,宽度要大于scroll-view标签的宽度,并且添加上 display:inline-block;行内块布局。


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM