How to solve the problem that scroll-view of WeChat applet cannot slide left and right

I'm currently working on my own small program project. Because it is not a professional front end. So I fell into a pit with every step. I would like to summarize the problems I encountered here. Avoid repeating the pit.

question:

When I was laying out the mini-program page, I used the scroll-view component, but found that horizontal movement had no effect. I looked up some information online 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>

wxss code

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

The idea is very simple. I want to use float:left; to arrange the elements that need to slide horizontally. After consulting the information, I found that elements that need to slide cannot use float. To achieve this effect, you need to use display:inline-block;.

Continue to modify (delete float:left; and use display:inline-block; to achieve the effect of horizontal arrangement of sub-elements)

wxss style

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

After making changes, you find that it still doesn’t work. And it was found that the line was wrapped after the subset element exceeded the width.

So add white-space: nowrap; to scroll-view to prevent its internal elements from wrapping. refresh. Achieve the final effect. Kaisen. Rendering

Final version 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;
}

Knot

1. The elements that need to slide in the scroll-view cannot be floated to achieve the horizontal arrangement effect. You can use display:inline-block; to change them to inline block elements;

2. Using display:flex; on a large box in scroll-view that contains elements that need to slide has no effect;

3. The large box that wraps the scroll-view has a clear width and style white-space:nowrap;

Attached are the main properties of scroll-view:

Summarize

This is the end of this article about how to solve the problem that the scroll-view of WeChat mini-program cannot slide left and right. For more relevant content about the scroll-view of WeChat mini-program sliding left and right, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

WeChat applet scroll-view implementation anchor sliding example
WeChat applet uses scroll-view tag to realize automatic sliding to the bottom function example code
WeChat applet scroll-view imitates Pinduoduo's horizontal sliding scroll bar
WeChat applet - horizontal sliding scroll-view hides the scroll bar
WeChat applet scroll-view horizontal sliding nested for loop sample code

<<: Linux common basic commands and usage

>>: Installation and configuration tutorial of MySQL 8.0.16 under Win10