Shulou(Shulou.com)06/01 Report--

This article introduces in detail "How to solve the problem that Weixin Mini Programs (Mini) scroll-view cannot slide left and right," with detailed content, clear steps and proper details. I hope this article "How to solve the problem that Weixin Mini Programs scroll-view cannot slide left and right" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

Question:

Mini programs in the page layout when using the scroll-view component, found that horizontal movement has no effect. I looked it up online and found out what the problem was.

My wxml code

Zhang San Zhang San Zhang San Zhang San Zhang San Zhang San Zhang San Zhang San Zhang San

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 simple: float:left; lets slide elements horizontally. Float cannot be used to float elements that need to be slid. To achieve this effect you need to use display:inline-block;.

Continue to change (delete float:left;. Use display:inline-block; to achieve the effect of horizontal arrangement of child elements)

wxss style

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

Change it to find that it cannot be used after changing it or it cannot be used. And it was found that the subset element was wrapped after exceeding the width.

So add white-space: nowrap to scroll-view; don't let its inner elements wrap. Refresh. To achieve the final result. Carson. renderings

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 scroll-view cannot be floated without float to achieve horizontal arrangement effect. You can use display:inline-block; to change them to inline block elements;

2. display:flex; is useless for large boxes in scroll-view that wrap elements that need to be slid;

3. Large box for wrapping scroll-view with clear width and plus style white-space:nowrap;

Additional scroll-view Main properties:

Read here, this article "Weixin Mini Programs (Mini) scroll-view can not slide left and right how to solve" article has been introduced, want to master the knowledge points of this article still need to be used by yourself to understand, if you want to know more related content articles, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.