I’ve been working on my own mini program. Because it’s not a professional front-end. So one step at a time. Here I want to sum up the problems encountered. Avoid repeated pit entry.

Question:

When the small program page layout used the Scrollview component, found that horizontal movement has no effect. I looked it up on the Internet and found the problem.

My WXML code

<scroll-view scroll-x="true" class="scroll" bindscrolltolower="lower" bindscroll="scroll">
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
        <view class="user_info">
          <view class="user_head">
            <image src=".. /.. /icon/head.jpg"></image>
          </view>
          <view class="username">Zhang SAN</view>
        </view>
       

      </scroll-view>
Copy the code

WXSS code

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

The idea is simple: float:left; Arrange the elements that need to slide horizontally. After reviewing the data, we found that elements that need to slide cannot be floated using float. To achieve this effect use display:inline-block; To implement.

Float :left; In the display: inline – block; Horizontal arrangement of child elements

WXSS style

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

Is it not working or not working? And it turns out it’s because the subset element gets wrapped when it exceeds the width.

So add white-space to the scroll view: nowrap; Do not wrap its inner elements. The refresh. Achieve the end result. Sen. rendering

The final version WXSS

The final 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;
}
Copy the code

conclusion

Display :inline-block; display:inline-block; display:inline-block; display:inline-block; Change it to an inline block element;

2. Use display:flex in the scroll view to wrap the large box of elements that need to be slid; It has no effect;

3. The large box wrapped around the Scroll View has a clear width plus the style white-space:nowrap;

Finally, welcome to my personal blog :zShare