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
posted @ 2021-08-27 17:20  coder木易  阅读(1009)  评论(0)  编辑  收藏  举报