# Slot
# 下拉刷新/上推加载动画
在 mode 为slide的情况下并且 pull-refresh/push-load 启用的情况下，可以给 Vuescroll 传入不同的 slot 来当作 pull-refresh/push-load 的不同阶段的提示。请确保你 slot 的 dom 的 position 是 absolute，所有可能会引起一些 bug。。。
# 刷新
| slot 名称 | 对应显示阶段 | 描述 |
|---|---|---|
| refresh-deactive | deactive | deactive 阶段显示的提示 dom |
| refresh-beforeDeactive | beforeDeactive | beforeDeactive 阶段显示的提示 dom |
| refresh-start | start | start 阶段显示的提示 dom |
| refresh-active | active | active 阶段显示的提示 dom |
# 用法
<div calss="parent">
<vuescroll>
<!-- Refresh-slot -->
<div class="slot-refresh" slot="refresh-start"></div>
<div class="child">
</div>
</vuescroll>
</div>
# 加载
| slot 名称 | 对应显示阶段 | 描述 |
|---|---|---|
| load-deactive | deactive | deactive 阶段显示的提示 dom |
| load-beforeDeactive | beforeDeactive | beforeDeactive 阶段显示的提示 dom |
| load-start | start | start 阶段显示的提示 dom |
| load-active | active | active 阶段显示的提示 dom |
# 用法
<div calss="parent">
<vuescroll>
<!-- Load-slot -->
<div class="slot-load" slot="load-start"></div>
<div class="child">
</div>
</vuescroll>
</div>
自定义不同的加载动画
选择一个动画
源码.
# 自定义 Container/Panel/Content
# 用法
<template>
<div calss="parent">
<vuescroll>
<!-- Customize container -->
<test-slot slot="scroll-container" name="container"> </test-slot>
<!-- Customize panel-->
<test-slot slot="scroll-panel" name="container"> </test-slot>
<!-- Customize content-->
<test-slot slot="scroll-content" name="container"> </test-slot>
<div class="child"></div>
</vuescroll>
</div>
</template>
<script>
Vue.component('test-slot', {
template: '<div :data-id="name"><slot></slot></div>',
props: ['name']
});
</script>
