您的位置：首页 > 编程学习 > > 正文

微信小程序scrollview 截图（微信小程序scroll-view不能左右滑动问题的解决方法）

更多时间：2021-10-09 00:24:15 类别：编程学习浏览量：983

微信小程序scrollview 截图

微信小程序scroll-view不能左右滑动问题的解决方法

最近在做自己小程序项目。因为并非专业前端。所以一步一掉坑。在这里想着把遇到的问题总结一下。避免重复进坑。

问题：

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

我的wxml代码

<scroll-view scroll-x="true" class="scroll" bindscrolltolower="lower" bindscroll="scroll">
        <view class="user_info">
          <view class="user_head">
            <image src="../../icon/head.jpg" alt="微信小程序scrollview 截图（微信小程序scroll-view不能左右滑动问题的解决方法）" border="0" />

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;不让其内部元素换行。刷新。实现最终效果。开森。效果图

微信小程序scrollview 截图（微信小程序scroll-view不能左右滑动问题的解决方法）

最终版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;
}