目录
picker | uni-app官网 (dcloud.net.cn)
一、uni-app官网网址
查看更详细的组件和组件属性
uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/component/view.html
二、uni-app常用组件
具体示例可以参考官方文档
1.视图容器
1.1 view
视图容器。
它类似于传统html中的div,用于包裹各种元素内容。
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
视频播放组件。