更新记录
1.0.2(2024-04-17)
下载此版本
修改MD文件,增加loadmore信息
1.0.1(2024-04-16)
下载此版本
优化下拉、滚动时异常的问题。在下拉时、滚动时,互不触发事件(单独执行)。
已经测试H5,App
1.0.0(2024-03-11)
下载此版本
尚未编写文档
采用微信Wxs技术,生成自动滚动
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
app-harmony |
? |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
k-scroll
下拉刷新
采用Wxs自定义滚动
测试
- 谷歌浏览器(122.0.6261.112(正式版本) (64 位))
- 微信小程序(调试基础库:3.3.3)(表现最完美)
- 小米11手机浏览器
参数名、函数名 |
类型 |
默认值 |
注释 |
@refresh |
Function(NextBack) |
|
触发下拉刷新 |
@loadmore |
Function(NextBack) |
|
触发加载更多 |
@stateCallback |
Function(DownState) |
|
下拉状态更新 |
@downHeightCallback |
Function(Height: number) |
|
下拉高度的回调 |
@scrollHeightCallback |
Function(Height: number) |
|
响应滚动高度回调 |
auto |
boolean |
true |
初始加载是否 |
loadingDomHeight |
number |
60 |
加载状态的loading区域的高度 |
releaseHeight |
number |
60 |
释放loading区域的高度 |
nextBottomHeight |
number |
30 |
底部区域触发加载下一页 |
linerTime |
number |
150 |
返回/自动刷新动画进行的耗时(ms) |
scrollTop |
number |
0 |
动态设置滚动的高度 |
DownState
状态名 |
状态值 |
注释 |
wait |
wait |
等待下拉中 |
downing |
downing |
下拉中 |
release |
release |
等待释放中 |
loading |
loading |
加载中 |
backing |
backing |
下拉回退中 |
NextBack
- 类型: Function(nomore: boolean)
- 说明: 关闭加载中状态
- nomore: 是否已经加载完毕【true,所有页面加载完毕。false,所有页面未加载完毕】
Slot
插槽名 |
参数 |
注释 |
downing |
|
下拉中 |
release |
|
松开刷新 |
loading |
|
刷新中 |
backing |
|
返回中 |
loadmore-wait |
|
上拉加载更多 |
loadmore |
|
上拉加载中 |
k-loadmore-none |
|
上拉没有更多了 |
Ref.Function
函数名称 |
类型 |
注释 |
openLoading |
(state:boolean = true)=>void |
打开下拉刷新 |
loadMore |
()=>void |
加载更多 |
示例:
<template>
<k-scroll ref="KScrollRef"></k-scroll>
</template>
<script setup lang="ts">
import {ref} from "vue";
const KScrollRef = ref;
function handleRefScrollLoading() {
KScrollRef.value.openLoading();
}
</script>