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

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

Recommend

Javascript Virtual DOM Detailed Explanation

Table of contents What is virtual dom? Why do we ...

Detailed explanation of Mysql's method of optimizing order by statement

In this article, we will learn about the optimiza...

Detailed explanation of the functions and usage of MySQL common storage engines

This article uses examples to illustrate the func...

WeChat applet implements the snake game

This article shares the specific code of the WeCh...

Detailed explanation of the implementation method of database multi-table connection query

Detailed explanation of the implementation method...

Use js to write a simple snake game

This article shares the specific code of a simple...

Docker custom network implementation

Table of contents 1. Customize the network to rea...

Detailed explanation of the workbench example in mysql

MySQL Workbench - Modeling and design tool 1. Mod...

MySQL Advanced Learning Notes (Part 3): Introduction to MySQL Logical Architecture, Detailed Explanation of MySQL Storage Engine

Introduction to MySQL logical architecture Overvi...

Review of the best web design works in 2012 [Part 1]

At the beginning of the new year, I would like to...

Vue echarts realizes horizontal bar chart

This article shares the specific code of vue echa...

JavaScript canvas Tetris game

Tetris is a very classic little game, and I also ...

Detailed analysis of the usage and application scenarios of slots in Vue

What are slots? We know that in Vue, nothing can ...

How to connect SpringBoot to MySQL to get data and write to the backend interface

Table of contents 1. Create a new project 2. Add ...

Detailed explanation of solving the problem of cross-domain access of nginx/apache static resources

1. Apache static resource cross-domain access Fin...