终端扩展组件

扩展组件是终端提供了一些很方便的组件，在 hippy-vue 中由 @hippy/vue-native-components 提供，但因为暂时还没有 @hippy/vue-web-components 所以暂时无法在浏览器中使用。

animation

该组件是 hippy-vue 的动画解决方案，直接传入一个样式值和动画方案数组，即可触发动作效果。

需要说明的是一个 animation 本身就是个 View，它会带动所有子节点一起动画，所以如果动画需要分开控制的话，需要在界面层级上进行拆分。

参数

参数	描述	类型	支持平台
playing	控制动画是否播放	boolean	`ALL`
actions*	动画方案，其实是一个样式值跟上它的动画方案，详情请参考范例。	Object	`ALL`

actions 详解

和 React 不同，它将单个动画 Animation 和动画序列 AnimationSet 合二为一了，其实方法特别简单，发现是个对象就是 Animation，如果是个数组就是动画序列就用 AnimationSet 处理，单个动画参数具体参考 Animation 模块和范例。需要说明 hippy-vue 的动画参数有一些默认值，只有差异部分才需要填写。

特别说明，对 actions 替换后会自动新建动画，需手动启动新动画。有两种处理方式：
- 替换 actions => 延迟一定时间后（如setTimeout）调用 this.[animation ref].start()（推荐）
- playing = false => 替换 actions => 延迟一定时间后（如setTimeout） playing = true
2.6.0 版本新增 backgroundColor 背景色渐变动画支持，参考渐变色动画DEMO
- 设置 actions 对 backgroundColor 进行修饰
- 设置 valueType 为 color
- 设置 startValue 和 toValue 为 color值

事件

最低支持版本 2.5.2

参数	描述	类型	支持平台
start	动画开始时触发	`Function`	`ALL`
end	动画结束时触发	`Function`	`ALL`
repeat	每次循环播放时触发	`Function`	`Android`
cancel	动画取消时触发	`Function`	`ALL`

方法

最低支持版本 2.5.2

start

() => void 手动触发动画开始（playing属性置为true也会自动触发start函数调用）

pause

() => void 手动触发动画暂停（playing属性置为false也会自动触发pause函数调用）

resume

() => void 手动触发动画继续（playing属性置为false后再置为true会自动触发resume函数调用）

create

() => void 手动触发动画创建

reset

() => void 重置开始标记

dialog

[范例：demo-dialog.vue]

用于模态弹窗，默认透明背景色，需要加一个带背景色的 <div> 填充。

参数

参数	描述	类型	支持平台
animated	弹出时是否需要带动画	`boolean`	`ALL`
animationType	动画效果	`enum`(none, slide, fade, slide_fade)	`ALL`
supportedOrientations	支持屏幕翻转方向	`enum`(portrait, portrait-upside-down, landscape, landscape-left, landscape-right)[]	`ALL`
immersionStatusBar	是否是沉浸式状态栏。	`boolean`	`ALL`
darkStatusBarText	是否是亮色主体文字，默认字体是黑色的，改成 true 后会认为 Modal 背景为暗色调，字体就会改成白色。	`boolean`	`ALL`

事件

事件名称	描述	类型	支持平台
show	在`Modal`显示时会执行此回调函数。	`Function`	`ALL`
orientationChange	屏幕旋转方向改变	`Function`	`ALL`
requestClose	在`Modal`请求关闭时会执行此回调函数，一般时在 Android 系统里按下硬件返回按钮时触发，一般要在里面处理关闭弹窗。	`Function`	`Android`

swiper

[范例：demo-swiper.vue]

轮播组件，对应终端 ViewPager组件，里面只能包含 <swiper-slide> 组件。

注意事项：如果在 ul 里嵌套 swiper，因为 ul 自带复用能力，swiper 滚出屏幕后不可在对其进行任何操作（例如通过代码更改 current 值），否则很可能导致终端出错。

参数

参数	描述	类型	支持平台
current	实时改变当前所处页码	`number`	`ALL`
initialPage	指定一个数字，用于决定初始化后默认显示的页面index，默认不指定的时候是0	`number`	`ALL`
needAnimation	切换页面时是否需要动画。	`boolean`	`ALL`
scrollEnabled	指定ViewPager是否可以滑动，默认为true	`boolean`	`ALL`
direction	设置viewPager滚动方向，不设置默认横向滚动，设置 `vertical` 为竖向滚动	`boolean`	`Android`

事件

事件名称	描述	类型	支持平台
dragging	拖动时触发。	`Function`	`ALL`
dropped	拖拽松手时触发，就是确定了滚动的页面时触发。	`Function`	`ALL`
stateChanged*	手指行为发生改变时触发，包含了 idle、dragging、settling 三种状态，通过 state 参数返回	`Function`	`ALL`

stateChanged 三种值的意思：
- idle 空闲状态
- dragging 拖拽中
- settling 松手后触发，然后马上回到 idle

swiper-slide

[范例：demo-swiper.vue]

轮播组件页容器。

pull-header

[范例：demo-pull-header.vue]

下拉刷新组件，嵌套在 ul 中作为第一个子元素使用

事件

事件名称	描述	类型	支持平台
idle	滑动距离在 pull-header 区域内触发一次，参数 contentOffset	`Function`	`ALL`
pulling	滑动距离超出 pull-header 后触发一次，参数 contentOffset	`Function`	`ALL`
refresh	滑动超出距离，松手后触发一次	`Function`	`ALL`

方法

collapsePullHeader

() => void 收起顶部刷新条 <pull-header>。

pull-footer

[范例：demo-pull-footer.vue]

上拉刷新组件，嵌套在 ul 中作为最后一个子元素使用

事件

事件名称	描述	类型	支持平台
idle	滑动距离在 pull-footer 区域内触发一次，参数 contentOffset	`Function`	`ALL`
pulling	滑动距离超出 pull-footer 后触发一次，参数 contentOffset	`Function`	`ALL`
refresh	滑动超出距离，松手后触发一次	`Function`	`ALL`

方法

collapsePullFooter

() => void 收起底部刷新条 <pull-footer>。