# Events

# 数据处理相关事件

事件名 说明 回调参数
@query 下拉刷新或滚动到底部时会自动触发此方法。z-paging加载时也会触发(若要禁止,请设置:auto="false")。pageNo和pageSize会自动计算好,直接传给服务器即可。 参数1:pageNo(当前第几页);
参数2:pageSize(每页多少条)(pageSize必须与传给服务器的一致,如果需要修改pageSize,请通过:default-page-size="15"修改)
参数3 2.1.4:from(@query的触发来源:0.用户主动下拉刷新 1.通过reload触发 2.通过refresh触发 3.通过滚动到底部加载更多或点击底部加载更多触发)
@listChange 分页渲染的数组改变时触发 最终的分页数据数组

# 下拉刷新相关事件

事件名 说明 回调参数
@refresherStatusChange 自定义下拉刷新状态改变

(use-custom-refresher为false时无效)

【注:通过:refresher-status.sync绑定当前data中的指定变量亦可】
0-默认状态 1.松手立即刷新 2.刷新中 3.刷新成功(默认情况下看不到此状态,如果需要展示刷新成功状态,请设置刷新结束以后延时收回的时间,如::refresher-complete-delay="200")
@refresherTouchstart 自定义下拉刷新下拉开始

(use-custom-refresher为false时无效)

【注:当需要更细致定制自定义下拉刷新时使用,如果只需监听下拉刷新各个状态改变,使用refresherStatusChange即可】

(nvue无效)

当前触摸开始的屏幕点的y值(单位px)
@refresherTouchmove 自定义下拉刷新下拉拖动中

(use-custom-refresher为false时无效)

【注:在使用wxs的平台上,为减少wxs与js通信折损,只有在z-paging添加@refresherTouchmove时,wxs才会实时将下拉拖动事件传给js,在微信小程序和QQ小程序中,因$listeners无效,所以必须设置:watch-refresher-touchmove="true"方可使此事件被触发】
{pullingDistance: 下拉的距离, dy: 前后两次回调滑动距离的差值, viewHeight: refresh组件高度, rate:pullingDistance/viewHeight的比值}
@refresherTouchend 自定义下拉刷新下拉结束

(use-custom-refresher为false时无效)

【注:当需要更细致定制自定义下拉刷新时使用,如果只需监听下拉刷新各个状态改变,使用refresherStatusChange即可】

(nvue无效)

当前触摸结束分页内容下移的y值(单位px)
@onRefresh 自定义下拉刷新被触发 -
@onRestore 自定义下拉刷新被复位 -

# 底部加载更多相关事件

事件名 说明 回调参数
@loadingStatusChange 底部加载更多状态改变 0-默认状态 1.加载中 2.没有更多数据 3.加载失败

# 空数据与加载失败相关事件

事件名 说明 回调参数
@emptyViewReload 1.8.0 点击了空数据图中的重新加载按钮 点击重新加载后是否进行reload操作,默认为是。
如果需要禁止reload事件,则在page的methods中书写:

emptyViewReload(e) {
    e(false);
    //处理自己的业务逻辑
}

@emptyViewClick 2.3.3 点击了空数据图view -
@isLoadFailedChange 2.5.0 z-paging请求失败状态改变 当前是否是请求失败状态,为true代表是,反之为否;默认状态为否

# 返回顶部按钮相关事件

事件名 说明 回调参数
@backToTopClick 2.6.1 点击了返回顶部按钮 点击返回顶部按钮后是否滚动到顶部,默认为是。
如果需要禁止滚动到顶部事件,则在page的methods中书写:

backToTopClick(e) {
    e(false);
    //处理自己的业务逻辑
}

# 虚拟列表&内置列表相关事件

事件名 说明 回调参数
@virtualListChange 2.2.7 虚拟列表当前渲染的数组改变时触发,在虚拟列表中只会渲染可见区域内+预加载页面的数据

(nvue无效)

虚拟列表当前渲染的数组
@innerCellClick 2.4.0 使用虚拟列表或内置列表时点击了cell

(nvue无效)

参数1:item;
参数2:index

# 聊天记录模式相关事件

事件名 说明 回调参数
@hidedKeyboard 2.3.6 在聊天记录模式下,触摸列表隐藏了键盘

(nvue无效)

-

# 滚动相关事件

事件名 说明 回调参数
@scroll z-paging列表滚动时触发 (vue中) event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
(nvue中) event = {contentSize(列表的内容尺寸) = {width, height}, contentOffset(列表的偏移尺寸) = {x, y} , isDragging(用户是否正在拖动列表)}
@scrollTopChange scrollTop改变时触发,使用点击返回顶部时需要获取scrollTop时可使用此事件【注:通过:scroll-top.sync绑定当前data中的指定变量亦可】

(@scrolltoupper触发时,也会自动触发此方法,且scrollTop=0)

scrollTop
@scrolltolower z-paging内置的scroll-view滚动底部时触发 来源(toBottom滚动到底部;click点击了加载更多view)
@scrolltoupper z-paging内置的scroll-view滚动顶部时触发 -

# 布局&交互相关事件

事件名 说明 回调参数
@contentHeightChanged 2.1.3 z-paging中内容高度改变时触发 改变后的高度
@touchDirectionChange 2.3.0 监听列表触摸方向改变

(nvue无效)

(必须同时设置:watch-touch-direction-change="true")

列表触摸的方法,有topbottom两种值,top代表用户将列表向上移动(scrollTop不断减小),bottom代表用户将列表向下移动(scrollTop不断增大)