1 view

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。
当设置display: flex后，继续给view等容器组件设置flex-direction:row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局, 因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。

2 scroll-view

1. scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变
2. 可滚动视图区域。用于区域滚动。
3. 需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

<template>
	<view>
		<page-head title="scroll-view,区域滚动视图"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				Vertical Scroll
				<text>\n纵向滚动</text>
			</view>
			<view>
				<!-- scroll-top	Number/String		设置竖向滚动条位置 -->
				<!-- scroll-y	Boolean	false	允许纵向滚动 -->
				<!-- @scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件 -->
				<!-- @scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件 -->
				<!-- @scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} -->
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
				@scroll="scroll">
					<view id="demo1" class="scroll-view-item uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
				</scroll-view>
			</view>
			<!-- @tap	(event: MouseEvent) => void	-	手指触摸后马上离开 -->
			<!-- @longpress	(event: Event) => void	-	如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。 -->
			<view @tap="goTop" class="uni-link uni-center uni-common-mt">
				点击这里返回顶部
			</view>

			<view class="uni-title uni-common-mt">
				Horizontal Scroll
				<text>\n横向滚动</text>
			</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
					<view id="demo1" class="scroll-view-item_H uni-bg-red">A</view>
					<view id="demo2" class="scroll-view-item_H uni-bg-green">B</view>
					<view id="demo3" class="scroll-view-item_H uni-bg-blue">C</view>
				</scroll-view>
			</view>
            <view class="uni-common-pb"></view>
		</view>
	</view>
</template>

自定义下拉刷新

• 注意，在webview渲染时，自定义下拉刷新的性能不及pages.json中配置的原生下拉刷新。

3