uniapp/微信小程序 scroll-view 设置scroll-x 失效问题解决-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp/微信小程序 scroll-view 设置scroll-x 失效问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

实现一个横向滑动的scrollview，直接给scroll-view设置 scroll-x ，但是并没有实现想药实现横向滑动的效果，先看代码

<scroll-view class="scroll-view" scroll-x="true" >
			<view class="item" v-for="(item,index) in recommendSongs" :key="index">
					<image :src="item.picUrl" mode="" class="img"></image>
				<view class="desc ellipsis">
					{{item.name}}
				</view>
				<view class="count">
					{{item.playCount}}
				</view>
			</view>
</scroll-view>

css:
.scroll-view{
		width: 100%;
		.item{
			width: 218rpx;
			padding-bottom:16rpx;
			margin-right: 16rpx;
			line-height: 34rpx;	
		}
		.img {
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}

原因分析：

仔细看了官网后发现有这样一句话，
scroll-x不生效,微信小程序,uni-app,javascript
然而加上也并没有实现，直接说解决方案吧！

使用横向滚动时，不仅仅需要给<scroll-view>添加white-space: nowrap;样式，还要给他的子元素添加
display: inline-block;样式即可实现
如下：文章来源地址https://www.toymoban.com/news/detail-605332.html

.scroll-view{
		width: 100%;
		white-space: nowrap;//scroll-view元素
		.item{
			width: 218rpx;
			padding-bottom:16rpx;
			margin-right: 16rpx;
			line-height: 34rpx;	
			display: inline-block;//子元素
		}
		.img {
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}