Scroller 组件使用教程
优质
小牛编辑
138浏览
2023-12-01
安装
import { Scroller } from 'vux'
export default {
components: {
Scroller
}
}// 在入口文件全局引入
import Vue from 'vue'
import { Scroller } from 'vux'
Vue.component('scroller', Scroller)
该组件已经不再维护，也不建议使用，大部分情况下也不需要用到该组件。
建议使用第三方相关组件，相关 issue 将不会处理。
Scroller的内容必须是一个div，并且只能有一个divScroller 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器，很容易发生性能或者交互问题。
默认高度为整个视口高度，如果你加了x-header，那么你需要减去一个x-header的高度: height="-46"
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| value | object | 对象，上拉或者下拉的状态双向绑定，使用 v-model 绑定，pulldownStatus 及 pullupStatus | -- | |
| height | string | viewport height | 容器高度，默认为整个viewport高度，注意，该属性接受的是 String 类型，比如 200px，如果你希望scroller自动计算除去头部尾部的高度，请这样设置让组件自动计算，如height="-40" | -- |
| lock-x | boolean | false | 锁定X方向 | -- |
| lock-y | boolean | false | 锁定Y方向 | -- |
| scrollbar-x | boolean | false | 是否显示横向滚动条 | -- |
| scrollbarY | boolean | false | 是否显示垂直方向滚动条 | -- |
| bounce | boolean | true | 是否显示边缘回弹效果 | -- |
| use-pulldown | boolean | false | 是否使用下拉组件 | -- |
| use-pullup | boolean | false | 是否使用上拉组件 | -- |
| pulldown-config | object | see below | 下拉组件配置 | -- |
| pullup-config | object | see below | 上拉组件配置 | -- |
| scroll-bottom-offset | number | 0 | 在距离底部多长距离时触发事件 on-scroll-bottom | v2.2.1-rc.6 |
事件
| 名字 | 参数 | 说明 | 版本要求 |
| @on-scroll | (position) | 容器滚动时触发，参数为top和left位置 | -- |
| @on-scroll-bottom | -- | 滚动到底部时触发，注意事件会触发多次，如果你需要进行数据获取，记得设置一个状态值 | v2.2.1-rc.6 |
| @on-pulldown-loading | -- | 用户触发下拉刷新状态，监听该事件以获取加载新数据 | -- |
| @on-pullup-loading | -- | 用户触发上拉加载状态，监听该事件以加载新数据 | -- |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | scroller 内容，必须是一个 div 元素 | -- |
方法
| 名字 | 参数 | 说明 | 版本要求 |
| reset | (position, duration, easing) | 在内容变化(v-for渲染，异步数据加载)后需要调用，用以重新渲染，避免新加的内容无法上拉看到，一般在 $nextTick 回调里调用。easing 可以为 ease-in, ease-in-out, ease, bezier(n, n, n, n) | |
| donePullup | 设置上拉刷新操作完成，在数据加载后执行 | ||
| disablePullup | 禁用上拉刷新，在没有更多数据时执行 | ||
| enablePullup | 启用上拉刷新插件 | ||
| donePulldown | 设置下拉刷新操作完成，在数据加载后执行 |