How does WeChat Mini Programs use scroll-view horizontal sliding to nest for loops

In this article Xiaobian introduces in detail for you "WeChat Mini Programs how to use scroll-view horizontal sliding nested for loop", the content is detailed, the steps are clear, and the details are handled properly. I hope this "WeChat Mini Programs how to use scroll-view horizontal sliding nested for loop" article can help you solve your doubts.

1. layout and style, etc.

(1) xml layout

{{item.title}} {{item.content}}

(2) wxss

Scroll-view {width: 80%; white-space: nowrap;}. Item-content {width: 40%; display: inline-block; border: 1rpx solid gray; text-align: center;}

(3) js file

Data: {list: [{title: "topic 1", content: "content 1"}, {title: "topic 2", content: "content 2"}, {title: "topic 3", content: "content 3"}, {title: "topic 4", content: "content 4"}]}

2. Set the key points of horizontal sliding

(1) set the horizontal slide scroll-x= "true".

(2) scroll-view sets the width and white-space properties.

(3) item sets the display: inline-block attribute.

3. Explanation of attribute

(1) white-space: how the attribute sets how to handle white space within an element.

Normal defaults. Specifies that the text in the paragraph does not wrap, and the white space will be ignored by the browser.

Pre whitespace is retained by the browser. It behaves like the pre tag in HTML.

The nowrap text does not wrap, and the text continues on the same line until it encounters the br tag.

Pre-wrap preserves the sequence of white space characters, but wraps lines normally.

Pre-line merges a sequence of white space characters, but retains newline characters.

Inherit states that the value of the white-space attribute should be inherited from the parent element.

(2) display: inline-block; is set to inline block. An inline block can set the length and width, but does not inherit it from the parent element. That is, the child elements are arranged in a row without wrapping.

4. Other

WeChat Mini Programs development document

PS: about the problem of Mini Program scroll-view sliding left and right sideways has no effect (can't slide)

Solution:

The Mini Program component scroll-view can be divided into vertical sliding up and down and horizontal sliding from left to right. Horizontal sliding is just needed in this project, but during the test, it was found that horizontal sliding had no effect (the rest did not move there). After debugging, it was found that:

Elements that need to slide in 1.scroll-view cannot be floated with float

Large boxes of elements that need to be slid in 2.scroll-view are useless with display:flex;.

Elements that need to slide in 3.scroll-view are arranged horizontally with dislay:inline-block;.

4. The big box that wraps the scroll-view has a clear width and style-- > overflow:hidden;white-space:nowrap

Read here, the "WeChat Mini Programs how to use scroll-view horizontal sliding nested for loop" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.