微信小程序scroll-view不能左右滑动怎么解决

魁首哥

作者

微信小程序scroll-view不能左右滑动怎么解决

本文小编为大家详细介绍“微信小程序scroll-view不能左右滑动怎么解决”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序scroll-view不能左右滑动怎么解决”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

问题：

在小程序页面布局的时候用到了scroll-view组件，发现横向移动没有效果。在网上查阅了一下资料发现问题所在。

我的wxml代码

<scroll-viewscroll-x="true"class="scroll"bindscrolltolower="lower"bindscroll="scroll"><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view><viewclass="user_info"><viewclass="user_head"><imagesrc="../../icon/head.jpg"></image></view><viewclass="username">张三</view></view></scroll-view>

wxss代码

.enroll_view.scroll_view.scroll{height:160rpx;width:750rpx;overflow:hidden;}.user_info{float:left;margin-top:10rpx;height:140rpx;width:140rpx;}

想法很简单，想用float:left;让需要滑动的元素横向排列。经过查阅资料发现需要滑动的元素不能使用float浮动。为实现此效果需要使用display:inline-block;来实现。

继续改（删掉float:left;.用display:inline-block;实现子元素横向排列效果）

wxss样式

.user_info{margin-top:10rpx;height:140rpx;width:140rpx;display:inline-block;}

改是改完了发现不能用还是不能用。而且发现是因为子集元素超过宽度后就换行了。

所以给scroll-view添加white-space:nowrap;不让其内部元素换行。刷新。实现最终效果。开森。效果图

最终版wxss

.enroll_view.scroll_view.scroll{height:160rpx;width:750rpx;overflow:hidden;white-space:nowrap;}.user_info{margin-top:10rpx;height:140rpx;width:140rpx;display:inline-block;}