uni-app常用的一些基本视图组件

视图容器：

view组件：

视图容器，类似于HTML中的div。

横向布局演示：

<view class="uni-flex uni-row">
	<view class="flex-item uni-bg-red">A</view>
	<view class="flex-item uni-bg-green">B</view>
	<view class="flex-item uni-bg-blue">C</view>
</view>

.flex-item {
	width: 33.3%;
	height: 200rpx;
	text-align: center;
	line-height: 200rpx;
}

纵向布局演示：

<view class="uni-flex uni-column">
	<view class="flex-item flex-item-V uni-bg-red">A</view>
	<view class="flex-item flex-item-V uni-bg-green">B</view>
	<view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>

.flex-item-V {
	width: 100%;
	height: 150rpx;
	text-align: center;
	line-height: 150rpx;
}

scroll-view组件：

可滚动视图区域。用于区域滚动。
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

常用属性：

属性名	类型	默认值	说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
scroll-top	Number/String		设置竖向滚动条位置
scroll-left	Number/String		设置横向滚动条位置
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件

纵向滚动演示：

<view>
	<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>

横向滚动演示：

<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>

swiper组件：

滑块视图容器。
一般用于左右滑动或上下滑动，比如banner轮播图。
注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

常用属性：

属性名	类型	默认值	说明
indicator-dots	Boolean	false	是否显示面板指示点
autoplay	Boolean	false	是否自动切换
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
interval	Number	5000	自动切换时间间隔

演示：

<view class="uni-margin-wrap">
	<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
		<swiper-item>
			<view class="swiper-item uni-bg-red">A</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-green">B</view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item uni-bg-blue">C</view>
		</swiper-item>
	</swiper>
</view>

movable-view组件：

可移动的视图容器，在页面中可以拖拽滑动或双指缩放。
movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

常用属性：

属性名	类型	默认值	说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
@change	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）

示例：

vue

<template>
	<view class="page-body">
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title uni-common-mt">
				示例 1
				<text>\nmovable-view 区域小于 movable-area</text>
			</view>
			<movable-area>
				<movable-view :x="x" :y="y" direction="all" @change="onChange">text</movable-view>
			</movable-area>
			<view @tap="tap" class="uni-link uni-center uni-common-mt">
				点击这里移动至 (30px, 30px)
			</view>
			<view class="uni-title uni-common-mt">
				示例 2
				<text>\nmovable-view区域大于movable-area</text>
			</view>
			<movable-area>
				<movable-view class="max" direction="all">text</movable-view>
			</movable-area>
		</view>
	</view>
</template>

js

<script>
export default {
    data() {
        return {
            x: 0,
            y: 0,
            old: {
                x: 0,
                y: 0
            }
        }
    },
    methods: {
        tap: function(e) {
            this.x = this.old.x
            this.y = this.old.y
            this.$nextTick(function() {
                this.x = 30
                this.y = 30
            })
        },
        onChange: function(e) {
            this.old.x = e.detail.x
            this.old.y = e.detail.y
        }
    }
}
</script>

cover-view组件：

覆盖在原生组件上的文本视图。
app-vue和小程序框架，渲染引擎是webview的。但为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件（类似flash层级高于div）。为了能正常覆盖原生组件，设计了cover-view。

nvue演示：

<template>
    <view>
        <video ref="video" id="myVideo" class="video" :src="src" controls="true">
            <cover-view class="coverview" style="overflow-y: scroll;">
                <text class="text">{{ '\uEA06\uEA0E\uEA0C\uEA0A 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view 我是可以滚动的cover-view' }}</text>
            </cover-view>
        </video>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'cover-view',
                src: "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20181126-lite.m4v"
            }
        },
        onLoad() {
        },
        methods: {
        }
    }
</script>

<style>
    .content {
        text-align: center;
        height: 400rpx;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }

    .text {
        color: #4CD964;
        font-family: unincomponents;
    }

    .video {
        width: 750rpx;
        height: 400rpx;
        background-color: #808080;
    }

    .coverview {
        position: absolute;
        left: 0;
        right: 0;
        top: 0rpx;
        height: 150rpx;
        border-width: 10rpx;
        border-color: #4CD964;
    }
</style>

上面展示了部分常用视图组件及其部分代码演示，如果想要更深入的了解uni-app的视图组件或其他组件。可以前往官网查看。