代码如下

实现横向滑动，直接给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>


.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%;
    height: 60rpx;
    flex-direction: row; // 解决滚动
    white-space: nowrap;// 解决滚动
    .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;
    }
}	

参考链接：blog.csdn.net/weixin_4500…