scroll-view for scrolling view, divided into horizontal and vertical scroll. Note that the vertical scroll view must set the height of the scroll Otherwise, scroll-view does not take effect.
Scroll view common places are generally Item items more interface modules such as I
The main attributes:
Demo:
<! - vertical scrolling, where the height must be set ->
<Scroll-Y = Scroll-View "to 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>
< style = View "background: Yellow; width: 100px; height: 100px"> </ View>
</ Scroll-View>
! <- white- Space
. normal: normal No change (the default handling if the automatic text wrapping process. arrival border container contents will go to the next line)
pre: keep the HTML source code of the spaces and line breaks, equivalent to the pre tag
nowrap: mandatory text on one line, except when br Break tag
pre - wrap: with pre attributes,But when encountered outside the scope of the container will wrap
pre - Line: with pre attributes, but encountered consecutive spaces will be seen as a space
inherit: inherit
->
<!--水平滚动-->
<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>
You have to work hard to look effortless
You're going to sneak up and surprise everyone
Quote: https://blog.csdn.net/gujinapenggu5/article/details/80937498