uni-app常用组件 App开发 小程序开发 这篇就够了

目录

一、uni-app官网网址

二、uni-app常用组件

1.视图容器

1.1 view

1.2 scroll-view

1.3 swiper 

1.4 movable-area

1.5 movable-view

2.基础内容

2.1 icon

2.2 text

2.3 rich-text

3.表单组件

3.1 button

3.2 checkbox-group

3.3 form

3.4 input

3.5 label

3.6 picker

picker | uni-app官网 (dcloud.net.cn)

3.7 picker-view

3.8 radio-group

3.9 slider

3.10 switch

3.11 textarea

4.路由和页面跳转

4.1 navigator

5.媒体组件

5.1 audio

5.2 image

5.3 video

---

一、uni-app官网网址

查看更详细的组件和组件属性

uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/view.html

二、uni-app常用组件

具体示例可以参考官方文档

1.视图容器

1.1 view

视图容器。

它类似于传统html中的div，用于包裹各种元素内容。

uni-app官网 (dcloud.net.cn)

1.2 scroll-view

可滚动视图区域。用于区域滚动。

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

scroll-view组件的属性说明

scroll-view | uni-app官网 (dcloud.net.cn)

1.3 swiper 

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

swiper | uni-app官网 (dcloud.net.cn)

1.4 movable-area

可拖动区域

由于app和小程序的架构是逻辑层与视图层分离，使用js监听拖动时会引发逻辑层和视图层的频繁通讯，影响性能。为了方便高性能的实现拖动，平台特封装了movable-area组件。

movable-area指代可拖动的范围，在其中内嵌movable-view组件用于指示可拖动的区域。

即手指/鼠标按住movable-view拖动或双指缩放，但拖不出movable-area规定的范围。

当然也可以不拖动，而使用代码来触发movable-view在movable-area里的移动缩放。

movable-view的规范另见movable-view。

movable-area | uni-app官网 (dcloud.net.cn)

1.5 movable-view

可移动的视图容器，在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中，并且必须是直接子节点，否则不能移动。

movable-view | uni-app官网 (dcloud.net.cn)

2.基础内容

2.1 icon

图标在UniApp中简化操作、美化界面，提升用户体验，保持应用风格一致，并适应不同平台。

icon | uni-app官网 (dcloud.net.cn)

2.2 text

文本组件。用于包裹文本内容。

在app-uvue和app-nvue中，文本只能写在text中，而不能写在view的text区域。

虽然app-uvue中写在view的text区域的文字，也会被编译器自动包裹一层text组件，看起来也可以使用。但这样会造成无法修改该text文字的样式，详见uvue的样式不继承章节

text组件 | uni-app官网 (dcloud.net.cn)

2.3 rich-text

富文本。

支持默认事件，包括：click、touchstart、touchmove、touchcancel、touchend、longpress。

rich-text | uni-app官网 (dcloud.net.cn)

3.表单组件

3.1 button

按钮。

button | uni-app官网 (dcloud.net.cn)

3.2 checkbox-group

多项选择器，内部由多个 checkbox 组成。

checkbox-group | uni-app官网 (dcloud.net.cn)

3.3 form

表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

form | uni-app官网 (dcloud.net.cn)

3.4 input

单行输入框。

html规范中input不仅是输入框，还有radio、checkbox、时间、日期、文件选择功能。在uni-app规范中，input仅仅是输入框。其他功能uni-app有单独的组件或API：radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择

input | uni-app官网 (dcloud.net.cn)

3.5 label

用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。

for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前可以绑定的控件有：<button>, <checkbox>, <radio>, <switch>。

label | uni-app官网 (dcloud.net.cn)

3.6 picker

从底部弹起的滚动选择器。支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

picker | uni-app官网 (dcloud.net.cn)

3.7 picker-view

嵌入页面的滚动选择器。

相对于picker组件，picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时，往往需要使用picker-view。

picker-view | uni-app官网 (dcloud.net.cn)

3.8 radio-group

单项选择器，内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。

radio-group | uni-app官网 (dcloud.net.cn)

3.9 slider

滑动选择器。

slider | uni-app官网 (dcloud.net.cn)

3.10 switch

开关选择器。

switch | uni-app官网 (dcloud.net.cn)

3.11 textarea

多行输入框。

textarea | uni-app官网 (dcloud.net.cn)

4.路由和页面跳转

4.1 navigator

页面跳转。

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

除了组件方式，API方式也可以实现页面跳转，另见：uni.navigateTo(OBJECT) | uni-app官网

 navigator | uni-app官网 (dcloud.net.cn)

 

5.媒体组件

5.1 audio

音频。

audio | uni-app官网 (dcloud.net.cn)

5.2 image

图片组件。

image | uni-app官网 (dcloud.net.cn)

 

5.3 video

视频播放组件。

video | uni-app官网 (dcloud.net.cn)