uni-app基础组件视图容器
view
view组件类似于html中的div，其主要作⽤就是当做⼀个容器来使⽤
原生安卓app开发 属性说明
属性名类型默认
值
说明
hover-class String none指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation Boolean false指定是否阻⽌本节点的祖先节点出现点击态，App、H5、⽀付宝⼩程序、百度⼩程序不⽀持（⽀付宝⼩程序、百度⼩程序⽂档中都有此属性，实测未⽀持）
hover-start-time Number50按住后多久出现点击态，单位毫秒
hover-stay-time Number400⼿指松开后点击态保留时间，单位毫秒
scroll-view
可滚动区域，在webview中性能不如页⾯滚动
使⽤竖向滚动时，需要给 <scroll-view> ⼀个固定⾼度，通过 css 设置 height；使⽤横向滚动时，需要给<scroll-view>添加white-space: nowrap；样式。
属性说明
属性名类型默认值说明平台差异说明scroll-x Boolean false允许横向滚动
scroll-y Boolean false允许纵向滚动
upper-threshold Number50距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number50距底部/右边多远时（单位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 number45设置⾃定义下拉刷新阈值
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+
@refresherpulling EventHandle⾃定义下拉刷新控件被下拉
程序基础库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 Number0当前所在滑块的 index
current-item-id String当前所在滑块的 item-id ，不能与 current 被同时指
定
⽀付宝⼩程序不⽀持
interval Number5000⾃动切换时间间隔
duration Number500滑动动画时长app-nvue不⽀持
circular Boolean false是否采⽤衔接滑动，即播放到末尾后重新回到开头
vertical Boolean false滑动⽅向是否为纵向
previous-margin String0px前边距，可⽤于露出前⼀项的⼀⼩部分，接受 px 和
rpx 值
app-nvue、字节跳动⼩程序不⽀持
next-margin String0px后边距，可⽤于露出后⼀项的⼀⼩部分，接受 px 和
rpx 值
app-nvue、字节跳动⼩程序不⽀持acceleration Boolean false当开启时，会根据滑动速度，连续滑动多屏⽀付宝⼩程序
disable-
programmatic-
animation
Boolean false是否禁⽤代码变动触发 swiper 切换时使⽤动画。⽀付宝⼩程序
display-multiple-
items
Number1同时显⽰的滑块数量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 Number20阻尼系数，⽤于控制x或y改变时的动画和过界回弹的动画，值越⼤移动越快⼩程序、⽀付宝⼩程序、App、H5、百度⼩程序
friction Number2摩擦系数，⽤于控制惯性滑动的动画，值越⼤摩擦⼒越⼤，滑动越快停⽌；必须⼤于
0，否则会被设置成默认值⼩程序、⽀付宝⼩程序、App、H5、百度⼩程序
disabled Boolean false是否禁⽤
scale Boolean false是否⽀持双指缩放，默认缩放⼿势⽣效区域是在movable-view内⼩程序、⽀付宝⼩程序、App、H5、快⼿⼩程序
scale-min Number0.5定义缩放倍数最⼩值⼩程序、⽀付宝⼩程序、App、H5、快⼿⼩程序
scale-max Number10定义缩放倍数最⼤值
⼩程序、⽀付宝⼩
程序、App、H5、快
⼿⼩程序
scale-value Number1定义缩放倍数，取值范围为 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 Number23icon的⼤⼩，单位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/string0圆⾓⼤⼩app-nvue、基础库2.3.1+、QQ⼩程序、快⼿⼩程序
font-size number/string16右侧百分⽐字体⼤⼩app-nvue、基础库2.3.1+、QQ⼩程序stroke-width Number6进度条线的宽度，单位px
activeColor Color #09BB07（百度为
#E6E6E6）已选择的进度条的颜⾊
backgroundColor Color#EBEBEB未选择的进度条的颜⾊active Boolean false进度条从左往右的动画
active-mode String backwards backwards: 动画从头播；forwards：动画
从上次结束点接着播
App、H5、⼩程序、QQ⼩程序、快⼿
⼩程序
duration number30进度增加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 多⾏输⼊框
路由及跳转
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论