view(最基础的视图容器)

属性

类型

默认值

必填

说明

最低版本

hover-class

string

none


指定按下去的样式类。当 hover-class=“none” 时,没有点击态效果

1.0.0

hover-stop-propagation

boolean

false


指定是否阻止本节点的祖先节点出现点击态

1.5.0

hover-start-time

number

50


按住后多久出现点击态,单位毫秒

1.0.0

hover-stay-time

number

400


手指松开后点击态保留时间,单位毫秒

1.0.0

cover-image(覆盖在原生组件之上的图片视图)

属性

类型

必填

说明

最低版本

src

string


图标路径,支持临时路径、网络地址(1.6.0起支持)、云文件ID(2.2.3起支持)。暂不支持base64格式。

1.4.0

bindload

eventhandle


图片加载成功时触发

2.1.0

binderror

eventhandle


图片加载失败时触发

2.1.0

cover-view(覆盖在原生组件之上的文本视图)

可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher;只支持嵌套 cover-view、cover-image,可在 cover-view 中使用 button。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性

类型

必填

说明

版本

scroll-top

number/string


设置顶部滚动偏移量,仅在设置了 overflow-y: scroll 成为滚动元素后生效

2.1.0

movable-area(movable-view的可移动区域)

ps:
1、和movable-view结合使用。
2、当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;
3、当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)

属性

类型

默认值

必填

说明

最低版本

scale-area

Boolean

false


当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area

1.9.90

width

string

10px


宽度

height

string

10px


高度

movable-view(可移动的视图容器)

可移动的视图容器,在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。

ps:
1、movable-view 默认为绝对定位,top和left属性为0px

属性

类型

默认值

必填

说明

最低版本

direction

string

none


movable-view的移动方向,属性值有all、vertical、horizontal、none

1.2.0

inertia

boolean

false


movable-view是否带有惯性

1.2.0

out-of-bounds

boolean

false


超过可移动区域后,movable-view是否还可以移动

1.2.0

x

number


定义x轴方向的偏移,如果x的值不在可移动范围内,会自动移动到可移动范围;改变x的值会触发动画

1.2.0

y

number


定义y轴方向的偏移,如果y的值不在可移动范围内,会自动移动到可移动范围;改变y的值会触发动画

1.2.0

damping

number

20


阻尼系数,用于控制x或y改变时的动画和过界回弹的动画,值越大移动越快

1.2.0

friction

number

2


摩擦系数,用于控制惯性滑动的动画,值越大摩擦力越大,滑动越快停止;必须大于0,否则会被设置成默认值

1.2.0

disabled

boolean

false


是否禁用

1.2.0

scale

boolean

false


是否支持双指缩放,默认缩放手势生效区域是在movable-view内

1.9.90

scale-min

number

0.5


定义缩放倍数最小值

1.9.90

scale-max

number

10


定义缩放倍数最大值

1.9.90

scale-value

number

1


定义缩放倍数,取值范围为 0.5 - 10

1.9.90

animation

boolean

true


是否使用动画

2.1.0

bindchange

eventhandle


拖动过程中触发的事件,event.detail = {x, y, source}

1.9.90

bindscale

eventhandle


缩放过程中触发的事件,event.detail = {x, y, scale},x和y字段在2.1.0之后支持

1.9.90

htouchmove

eventhandle


否 初次手指触摸后移动为横向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch

1.9.90

vtouchmove

eventhandle


初次手指触摸后移动为纵向的移动时触发,如果catch此事件,则意味着touchmove事件也被catch

1.9.90

width

string

10px


宽度

height

string

10px


高度

bindchange 返回的 source 表示产生移动的原因

source值

说明

touch

拖动

touch-out-of-bounds

超出移动范围

out-of-bounds

超出移动范围后的回弹

friction

惯性

空字符串

setData

scroll-view(可滚动视图区域)

使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。
ps:
1、基础库 2.4.0以下不支持嵌套textarea、map、canvas、video 组件
2、scroll-into-view 的优先级高于 scroll-top
3、在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh
4、若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部
5、scroll-view 自定义下拉刷新可以结合 WXS 事件响应 开发交互动画

属性

类型

默认值

必填

说明

最低版本

scroll-x

boolean

false


允许横向滚动

1.0.0

scroll-y

boolean

false


允许纵向滚动

1.0.0

upper-threshold

number/string

50


距顶部/左边多远时,触发 scrolltoupper 事件

1.0.0

lower-threshold

number/string

50


距底部/右边多远时,触发 scrolltolower 事件

1.0.0

scroll-top

number/string


设置竖向滚动条位置

1.0.0

scroll-left

number/string


设置横向滚动条位置

1.0.0

scroll-into-view

string


值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素

1.0.0

scroll-with-animation

boolean

false


在设置滚动条位置时使用动画过渡

1.0.0

enable-back-to-top

boolean

false


iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向

1.0.0

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

refresher-enabled

boolean

false


开启自定义下拉刷新

2.10.1

refresher-threshold

number

45


设置自定义下拉刷新阈值

2.10.1

refresher-default-style

string

“black”


设置自定义下拉刷新默认样式,支持设置 black

white

refresher-background

string

“#FFF”


设置自定义下拉刷新区域背景颜色

2.10.1

refresher-triggered

boolean

false


设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发

2.10.1

bindscrolltoupper

eventhandle


滚动到顶部/左边时触发

1.0.0

bindscrolltolower

eventhandle


滚动到底部/右边时触发

1.0.0

bindscroll

eventhandle


滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

1.0.0

bindrefresherpulling

eventhandle


自定义下拉刷新控件被下拉

2.10.1

bindrefresherrefresh

eventhandle


自定义下拉刷新被触发

2.10.1

bindrefresherrestore

eventhandle


自定义下拉刷新被复位

2.10.1

bindrefresherabort

eventhandle


自定义下拉刷新被中止

2.10.1

swiper(滑块视图容器)

其中只可放置swiper-item组件,否则会导致未定义的行为。

ps:
1、如果在 bindchange 的事件回调函数中使用 setData 改变 current 值,则有可能导致 setData 被不停地调用,因而通常情况下请在改变 current 值前检测 source 字段来判断是否是由于用户触摸引起。

属性

类型

默认值

必填

说明

最低版本

indicator-dots

boolean

false


是否显示面板指示点

1.0.0

indicator-color

color

rgba(0, 0, 0, .3)


指示点颜色

1.1.0

indicator-active-color

color

#000000


当前选中的指示点颜色

1.1.0

autoplay

boolean

false


是否自动切换

1.0.0

current

number

0


当前所在滑块的 index

1.0.0

interval

number

5000


自动切换时间间隔

1.0.0

duration

number

500


滑动动画时长

1.0.0

circular

boolean

false


是否采用衔接滑动

1.0.0

vertical

boolean

false


滑动方向是否为纵向

1.0.0

previous-margin

string

“0px”


前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值

1.9.0

next-margin

string

“0px”


后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值

1.9.0

display-multiple-items

number

1


同时显示的滑块数量

1.9.0

skip-hidden-item-layout

boolean

false


是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息

1.9.0

easing-function

string

“default”


指定 swiper 切换缓动动画类型

2.6.5

bindchange

eventhandle


current 改变时会触发 change 事件,event.detail = {current, source}

1.0.0

bindtransition

eventhandle


swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}

2.4.3

bindanimationfinish

eventhandle


动画结束时会触发 animationfinish 事件,event.detail 同上

1.9.0

easing-function 的合法值


说明

default

默认缓动函数

linear

线性动画

easeInCubic

缓入动画

easeOutCubic

缓出动画

easeInOutCubic

缓入缓出动画

change事件 source 返回值
从 1.4.0 开始,change事件增加 source字段,表示导致变更的原因,可能值如下:
1、autoplay 自动播放导致swiper变化;
2、touch 用户划动引起swiper变化;
3、其它原因将用空字符串表示。

swiper-item(仅可放置在swiper组件中,宽高自动设置为100%)

属性

类型

必填

说明

最低版本

item-id

string


该 swiper-item 的标识符

1.9.0