当前位置: 首页 > 文档资料 > VUX 中文文档 >

Scroller 组件使用教程

优质
小牛编辑
141浏览
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,并且只能有一个div
Scroller 希望解决的是简单的列表问题而不是一个内嵌各种复杂标签交互的容器,很容易发生性能或者交互问题。

默认高度为整个视口高度,如果你加了x-header,那么你需要减去一个x-header的高度: height="-46"

请确保在你的数据更新后进行`reset`操作(参考下面文档),如果你做了`reset`还有问题再开`issue`并附上代码,否则将`绝对不会被处理`。

属性

名字类型默认值说明版本要求
valueobject对象,上拉或者下拉的状态双向绑定,使用 v-model 绑定,pulldownStatus 及 pullupStatus--
heightstringviewport height容器高度,默认为整个viewport高度,注意,该属性接受的是 String 类型,比如 200px,如果你希望scroller自动计算除去头部尾部的高度,请这样设置让组件自动计算,如height="-40"--
lock-xbooleanfalse锁定X方向--
lock-ybooleanfalse锁定Y方向--
scrollbar-xbooleanfalse是否显示横向滚动条--
scrollbarYbooleanfalse是否显示垂直方向滚动条--
bouncebooleantrue是否显示边缘回弹效果--
use-pulldownbooleanfalse是否使用下拉组件--
use-pullupbooleanfalse是否使用上拉组件--
pulldown-configobjectsee below下拉组件配置--
pullup-configobjectsee below上拉组件配置--
scroll-bottom-offsetnumber0在距离底部多长距离时触发事件 on-scroll-bottomv2.2.1-rc.6

事件

名字参数说明版本要求
@on-scroll(position)容器滚动时触发,参数为topleft位置--
@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设置下拉刷新操作完成,在数据加载后执行