更新记录

1.0.2(2024-04-17)

修改MD文件,增加loadmore信息

1.0.1(2024-04-16)

优化下拉、滚动时异常的问题。在下拉时、滚动时,互不触发事件(单独执行)。 已经测试H5,App

1.0.0(2024-03-11)

尚未编写文档 采用微信Wxs技术,生成自动滚动

查看更多

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.99 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × ×

k-scroll


下拉刷新 采用Wxs自定义滚动

测试

  1. 谷歌浏览器(122.0.6261.112(正式版本) (64 位))
  2. 微信小程序(调试基础库:3.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 加载更多
  • state:boolean 是否通知

示例:


<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>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问