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

最新推荐文章于 2025-04-25 16:33:57 发布

宋小土

最新推荐文章于 2025-04-25 16:33:57 发布

阅读量2.6k

点赞数 3

文章标签：微信小程序 uni-app javascript

本文链接：https://blog.youkuaiyun.com/weixin_45003732/article/details/129856146

版权

在微信小程序中，设置scroll-x属性未能使scroll-view实现横向滑动。原因在于需要添加white-space:nowrap;到scroll-view样式，并给其子元素添加display:inline-block;。应用这些样式后，横向滚动功能可以正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目场景：

实现一个横向滑动的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-view>添加white-space: nowrap;样式，还要给他的子元素添加
display: inline-block;样式即可实现
如下：

.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;
		}
	}