WeChat applet (9) scroll-view component details, Applet scroll-view

Applet (9) scroll-view component details, Applet scroll-view

Scroll-view is a rolling view, divided into horizontal and vertical scrolling. Note that you must set the height when scrolling the view vertically. Otherwise, scroll-view will not take effect. The commonly used items in a rolling view are interfaces with many items, such as my module.

Main attributes:

Demo:

Wxml

<! -- Vertical scroll. The height must be set here --> <scroll-view scroll-y = "true" style = "height: 200px"> <view style = "background: red; width: 100px; height: 100px "> </view> <view style =" background: green; width: 100px; height: 100px "> </view> <view style =" background: blue; width: 100px; height: 100px "> </view> <view style =" background: yellow; width: 100px; height: 100px "> </view> </scroll-view> <! -- White-space normal: normal (default processing method. text automatically processes line breaks. if the content arrives at the container boundary, it will go to the next line. pre: Keep spaces and line breaks in the HTML source code, which is equivalent to the pre label nowrap: force the text in one line, unless the br line feed label pre-wrap: Same as the pre attribute, the pre-line is automatically wrapped when the pre attribute is exceeded the container range, however, consecutive spaces are considered as a space. inherit: inheritance --> <! -- Horizontal scroll --> <scroll-view scroll-x = "true" style = "white-space: nowrap; display: flex"> <! -- Display: inline-block --> <view style = "background: red; width: 200px; height: 100px; display: inline-block "> </view> <view style =" background: green; width: 200px; height: 100px; display: inline-block "> </view> <view style =" background: blue; width: 200px; height: 100px; display: inline-block "> </view> <view style =" background: yellow; width: 200px; height: 100px; display: inline-block "> </view> </scroll-view>