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

视图容器：

view组件：

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

横向布局演示：

A

B

C

.flex-item {

width: 33.3%;

height: 200rpx;

text-align: center;

line-height: 200rpx;

}

纵向布局演示：

A

B

C

.flex-item-V {

width: 100%;

height: 150rpx;

text-align: center;

line-height: 150rpx;

}

scroll-view组件：

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

常用属性：

属性名类型默认值说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动scroll-topNumber/String设置竖向滚动条位置scroll-leftNumber/String设置横向滚动条位置@scrolltoupperEventHandle滚动到顶部/左边，会触发 scrolltoupper 事件@scrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件

纵向滚动演示：

@scroll="scroll">

A

B

C

横向滚动演示：

A

B

C

swiper组件：

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

常用属性：

属性名类型默认值说明indicator-dotsBooleanfalse是否显示面板指示点autoplayBooleanfalse是否自动切换durationNumber500滑动动画时长circularBooleanfalse是否采用衔接滑动，即播放到末尾后重新回到开头intervalNumber5000自动切换时间间隔

演示：

A

B

C

movable-view组件：

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

常用属性：

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

示例：

vue

js

cover-view组件：

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

nvue演示：

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

相关阅读

 您阅读本篇文章共花了：