uni-app基础组件

独钓江雪

以下所有内容都来自uni-app官方文档: https://uniapp.dcloud.io/component/

 

• 视图容器
• view

　　　　　　view组件类似于html中的div,其主要作用就是当做一个容器来使用

　　　　　　　属性说明

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

• scroll-view

　　　　　　可滚动区域,在webview中性能不如页面滚动

　　　　　　　使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。

　　　　　　　属性说明

 

属性名	类型	默认值	说明	平台差异说明
scroll-x	Boolean	false	允许横向滚动
scroll-y	Boolean	false	允许纵向滚动
upper-threshold	Number	50	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	50	距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top	Number		设置竖向滚动条位置
scroll-left	Number		设置横向滚动条位置
scroll-into-view	String		值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation	Boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	Boolean	false	iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向	app-nvue，微信小程序
show-scrollbar	Boolean	false	控制是否出现滚动条	App-nvue 2.1.5+
refresher-enabled	Boolean	false	开启自定义下拉刷新	app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-threshold	number	45	设置自定义下拉刷新阈值	app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-default-style	string	"black"	设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式	app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-background	string	"#FFF"	设置自定义下拉刷新区域背景颜色	app-vue 2.5.12+,微信小程序基础库2.10.1+
refresher-triggered	boolean	false	设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发	app-vue 2.5.12+,微信小程序基础库2.10.1+
enable-flex	boolean	false	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。	微信小程序 2.7.3
scroll-anchoring	boolean	false	开启 scroll anchoring 特性，即控制滚动位置不随内容变化而抖动，仅在 iOS 下生效，安卓下可参考 CSS overflow-anchor 属性。	微信小程序 2.8.2
@scrolltoupper	EventHandle		滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower	EventHandle		滚动到底部/右边，会触发 scrolltolower 事件
@scroll	EventHandle		滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@refresherpulling	EventHandle		自定义下拉刷新控件被下拉	app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrefresh	EventHandle		自定义下拉刷新被触发	app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherrestore	EventHandle		自定义下拉刷新被复位	app-vue 2.5.12+,微信小程序基础库2.10.1+
@refresherabort	EventHandle		自定义下拉刷新被中止	app-vue 2.5.12+,微信小程序基础库2.10.1+

 

• swiper

　　　　　滑块视图容器,一般用于左右或上下滑动

　　　　　　属性说明

属性名	类型	默认值	说明	平台差异说明
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色
indicator-active-color	Color	#000000	当前选中的指示点颜色
active-class	String		swiper-item 可见时的 class	支付宝小程序
changing-class	String		acceleration 设置为 {{true}} 时且处于滑动过程中，中间若干屏处于可见时的class	支付宝小程序
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String		当前所在滑块的 item-id ，不能与 current 被同时指定	支付宝小程序不支持
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长	app-nvue不支持
circular	Boolean	false	是否采用衔接滑动，即播放到末尾后重新回到开头
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	0px	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序不支持
next-margin	String	0px	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	app-nvue、字节跳动小程序不支持
acceleration	Boolean	false	当开启时，会根据滑动速度，连续滑动多屏	支付宝小程序
disable-programmatic-animation	Boolean	false	是否禁用代码变动触发 swiper 切换时使用动画。	支付宝小程序
display-multiple-items	Number	1	同时显示的滑块数量	app-nvue、支付宝小程序不支持
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	App、微信小程序
disable-touch	Boolean	false	是否禁止用户 touch 操作	App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（只在初始化时有效，不能动态变更）
touchable	Boolean	true	是否监听用户的触摸事件，只在初始化时有效，不能动态变更	字节跳动小程序（uni-app 2.5.5+ 推荐统一使用 disable-touch）
easing-function	String	default	指定 swiper 切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic	微信小程序、快手小程序
@change	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
@transition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}，支付宝小程序暂不支持dx, dy	App、H5、微信小程序、支付宝小程序、字节跳动小程序、QQ小程序、快手小程序
@animationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail = {current: current, source: source}	字节跳动小程序不支持

　　　　　　change事件返回的detail表示触发原因,其中有三个取值:autoplay(自动播放),touch(用户触发),空字符串(其他原因)

　　　　　　swiper做左右拖动的长列表时,可以参考这个范例，插件市场新闻模板示例，

　　　　　　swiper-item组件:仅可放在swiper中,宽高自动设置为100%,属性:item-id 该组件的标识

• match-media　　

　　　　　　media query 匹配检测节点。

　　　　　　类似于网页开发中使用媒体查询来适配大屏小屏，match-media是一个可适配不同屏幕的基本视图组件。可以指定一组 media query 媒体查询规则，满足查询条件时，这个组件才会被展示。

　　　　　　例如在match-media组件中放置一个侧边栏，媒体查询规则设置为宽屏才显示，就可以实现在PC宽屏显示该侧边栏，而在手机窄屏中不显示侧边栏的效果。

　　　　　　

属性名	类型	默认值	必填	说明
min-width	number		否	页面最小宽度（ px 为单位）
max-width	number		否	页面最大宽度（ px 为单位）
width	number		否	页面宽度（ px 为单位）
min-height	number		否	页面最小高度（ px 为单位）
max-height	number		否	页面最大高度（ px 为单位）
height	number		否	页面高度（ px 为单位）
orientation	string		否	屏幕方向（ landscape 或 portrait ）

• movable-area

　　　　　　可拖动区域

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

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

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

　　　　　　注意：movable-area 必须设置 width 和 height 属性，不设置默认为 10px

　　　　　　

属性名	类型	默认值	说明
scale-area	Boolean	false	当里面的 movable-view 设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个 movable-area

 

• movable-view

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

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

　　　　　　属性说明

属性名	类型	默认值	说明	平台差异说明
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性	微信小程序、支付宝小程序、App、H5、百度小程序
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动	微信小程序、支付宝小程序、App、H5、百度小程序、快手小程序
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快	微信小程序、支付宝小程序、App、H5、百度小程序
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值	微信小程序、支付宝小程序、App、H5、百度小程序
disabled	Boolean	false	是否禁用
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	微信小程序、支付宝小程序、App、H5、快手小程序
scale-min	Number	0.5	定义缩放倍数最小值	微信小程序、支付宝小程序、App、H5、快手小程序
scale-max	Number	10	定义缩放倍数最大值	微信小程序、支付宝小程序、App、H5、快手小程序
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10	微信小程序、支付宝小程序、App、H5、快手小程序
animation	Boolean	true	是否使用动画	微信小程序、支付宝小程序、App、H5、百度小程序、快手小程序
@change	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）
@scale	EventHandle		缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，	微信小程序、App、H5、百度小程序、快手小程序

　　　　　　除了基本事件外，movable-view提供了两个特殊事件

类型	触发条件
htouchmove	初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch
vtouchmove	初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch

• cover-view

　　　　　　覆盖在原生组件上的文本视图。

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

 

属性名	类型	默认值	说明	平台差异说明
scroll-top	number/string		设置顶部滚动偏移量，仅在设置了 overflow-y: scroll 成为滚动元素后生效	微信小程序2.1.0

• cover-image

　　　　　覆盖在原生组件上的图片视图。可覆盖的原生组件同cover-view，支持嵌套在cover-view里。

　　　　　　

属性名	类型	默认值	说明	平台差异说明
src	String		图标路径。支持本地路径、网络路径。不支持 base64 格式。
@load	eventhandle		图片加载成功时触发	微信小程序 2.1.0
@error	eventhandle		图片加载失败时触发	微信小程序 2.1.0

 

• 基础内容
• icon

　　　　　图标,由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异。

　　　　　　 属性说明

属性名	类型	默认值	说明
type	String		icon的类型
size	Number	23	icon的大小，单位px
color	Color		icon的颜色，同css的color

• text

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

　　　　　　属性说明

属性名	类型	默认值	说明	平台差异说明
selectable	Boolean	false	文本是否可选	App、H5、快手小程序
user-select	Boolean	false	文本是否可选	微信小程序
space	String		显示连续空格	App、H5、微信小程序
decode	Boolean	false	是否解码	App、H5、微信小程序

　　　　　　space值有3个: ensp(中文字符空格一半大),emsp(中文字符空格大小),nbsp(根据字体设置的空格大小)

• rich-text

　　　　　富文本

属性名	类型	默认值	说明	平台兼容
nodes	Array / String	[]	节点列表 / HTML String
space	string		显示连续空格	微信基础库2.4.1+详见、QQ小程序、快手小程序详见
selectable	Boolean	false	富文本是否可以长按选中，可用于复制，粘贴等场景	百度小程序（真机）

• progress

　　　　进度条

属性名	类型	默认值	说明	平台差异说明
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
border-radius	number/string	0	圆角大小	app-nvue、微信基础库2.3.1+、QQ小程序、快手小程序
font-size	number/string	16	右侧百分比字体大小	app-nvue、微信基础库2.3.1+、QQ小程序
stroke-width	Number	6	进度条线的宽度，单位px
activeColor	Color	#09BB07（百度为#E6E6E6）	已选择的进度条的颜色
backgroundColor	Color	#EBEBEB	未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播	App、H5、微信小程序、QQ小程序、快手小程序
duration	number	30	进度增加1%所需毫秒数	App-nvue2.6.1+、微信基础库2.8.2+、H5 3.1.11+、快手小程序
@activeend	EventHandle		动画完成事件	微信小程序

• 表单组件
  • button 按钮
  • CheckBox 多选框
  • editor 富文本编辑器
  • form 表单
  • input 输入框
  • label 表单分组
  • picker 普通选择器,底部弹出的滚动选择弹窗
  • picker-view 嵌入页面的滚动选择器
  • radio 单项选择器
  • slider 滑动选择器
  • switch 开关选择器
  • textarea 多行输入框

• 路由及跳转
• navigater 页面跳转

属性名	类型	默认值	说明	平台差异说明
url	String		应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加 .vue 后缀
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
animation-type	String	pop-in/out	当 open-type 为 navigate、navigateBack 时有效，窗口的显示/关闭动画效果，详见：窗口动画	App
animation-duration	Number	300	当 open-type 为 navigate、navigateBack 时有效，窗口显示/关闭动画的持续时间。	App
hover-class	String	navigator-hover	指定点击时的样式类，当hover-class="none"时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	微信小程序
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒
target	String	self	在哪个小程序目标上发生跳转，默认当前小程序，值域self/miniProgram	微信2.0.7+、百度2.5.2+、QQ

• 媒体组件
  • audio 音频
  • camera 区域相机
  • image 图片
  • video 视频播放组件
  • live-player 直播拉流
  • live-pusher 直播推流
• 地图
  • map 地图组件

    属性名	类型	默认值	说明	平台差异说明
    longitude	Number		中心经度
    latitude	Number		中心纬度
    scale	Number	16	缩放级别，取值范围为3-20	高德地图缩放比例与微信小程序不同
    min-scale	Number	3	最小缩放级别	App-nvue 3.1.0+、微信小程序2.13+
    max-scale	Number	20	最大缩放级别	App-nvue 3.1.0+、微信小程序2.13+
    layer-style	Number	1	个性化地图	App-nvue 3.1.0+、微信小程序2.13+
    markers	Array		标记点
    polyline	Array		路线
    circles	Array		圆
    controls	Array		控件
    include-points	Array		缩放视野以包含所有给定的坐标点	App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序
    enable-3D	Boolean	false	是否显示3D楼块	App-nvue 2.1.5+、微信小程序2.3.0
    show-compass	Boolean	false	是否显示指南针	App-nvue 2.1.5+、微信小程序2.3.0
    enable-zoom	Boolean	true	是否支持缩放	App-nvue 2.1.5+、微信小程序2.3.0
    enable-scroll	Boolean	true	是否支持拖动	App-nvue 2.1.5+、微信小程序2.3.0
    enable-rotate	Boolean	false	是否支持旋转	App-nvue 2.1.5+、微信小程序2.3.0
    enable-overlooking	Boolean	false	是否开启俯视	App-nvue 2.1.5+、微信小程序2.3.0
    enable-satellite	Boolean	false	是否开启卫星图	App-nvue 2.1.5+、微信小程序2.7.0
    enable-traffic	Boolean	false	是否开启实时路况	App-nvue 2.1.5+、微信小程序2.7.0
    enable-poi	Boolean	false	是否展示 POI 点	App-nvue 3.1.0+
    enable-building	Boolean	false	是否展示建筑物	App-nvue 3.1.0+ 支持 (废除原enable-3D属性 高德地图默认开启建筑物就是3D无法设置)
    show-location	Boolean		显示带有方向的当前定位点	微信小程序、H5、百度小程序、支付宝小程序
    polygons	Array.<polygon>		多边形	App-nvue 2.1.5+、微信小程序、百度小程序、支付宝小程序
    enable-indoorMap	Boolean	false	是否展示室内地图	App-nvue 3.1.0+
    @markertap	EventHandle		点击标记点时触发，e.detail = {markerId}	App-nvue 2.3.3+, App平台需要指定 marker 对象属性 id
    @labeltap	EventHandle		点击label时触发，e.detail = {markerId}	微信小程序2.9.0
    @callouttap	EventHandle		点击标记点对应的气泡时触发，e.detail = {markerId}
    @controltap	EventHandle		点击控件时触发，e.detail = {controlId}
    @regionchange	EventHandle		视野发生变化时触发	微信小程序、H5、百度小程序、支付宝小程序
    @tap	EventHandle		点击地图时触发; App-nuve、微信小程序2.9支持返回经纬度
    @updated	EventHandle		在地图渲染更新完成时触发	微信小程序、H5、百度小程序
    @anchorpointtap	EventHandle		点击定位标时触发，e.detail = {longitude, latitude}	App-nvue 3.1.0+、微信小程序2.13+
    @poitap	EventHandle		点击地图poi点时触发，e.detail = {name, longitude, latitude}	微信小程序2.3.0+

• 画布
• canvas 画布

属性名	类型	默认值	说明	平台差异说明
type	String		指定 canvas 类型，支持 2d (2.9.0) 和 webgl	微信小程序 2.7.0+ 字节小程序1.78.0+
canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新	字节跳动小程序不支持
@touchstart	EventHandle		手指触摸动作开始	字节小程序1.78.0+
@touchmove	EventHandle		手指触摸后移动	字节小程序1.78.0+
@touchend	EventHandle		手指触摸动作结束	字节小程序1.78.0+
@touchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗	字节小程序1.78.0+
@longtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动	字节跳动小程序不支持
@error	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}	字节跳动小程序不支持

• webview
• webview  web浏览器组件

属性名	类型	说明	平台差异说明
src	String	webview 指向网页的链接
allow	String	用于为 iframe 指定其特征策略	H5
sandbox	String	该属性对呈现在 iframe 框架中的内容启用一些额外的限制条件。	H5
webview-styles	Object	webview 的样式	App-vue
@message	EventHandler	网页向应用 postMessage 时，会在特定时机（后退、组件销毁、分享）触发并收到消息。	H5 暂不支持（可以直接使用 window.postMessage）
@onPostMessage	EventHandler	网页向应用实时 postMessage	App-nvue

• 广告
  • ad 信息流广告
  • ad-draw 沉浸式视频流广告
  • ad-content-page 短视频内容联盟组件
  • grid广告 
• 页面属性节点
  • page-meta
  • navigation-bar
  • custom-tab-bar

来源：https://www.cnblogs.com/codermuyi/p/15194595.html