更新记录
1.0.0(2025-03-17) 下载此版本
自定义下拉刷新
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
解决sticky置顶不被原生下拉刷新功能页面整体下移的问题
在使用原生下拉刷新功能时,页面整体会下移,导致sticky置顶效果失效。为了解决这个问题,可以使用自定义下拉刷新组件CustomRefresh。该组件完全解决了小程序下拉刷新时页面下移的问题,确保sticky置顶效果正常。
使用示例
以下是一个使用CustomRefresh组件的示例,展示了如何解决sticky置顶不被原生下拉刷新功能页面整体下移的问题:
CustomRefresh 自定义下拉刷新组件
一个轻量级的微信小程序自定义下拉刷新组件,可以替代原生的下拉刷新,提供更好的用户体验和自定义能力。
功能特点
- 完全自定义的下拉刷新UI
- 类似原生App的下拉刷新体验
- 支持自定义文案和图标
- 支持手动控制刷新状态
- 完全解决小程序下拉刷新时页面下移的问题
使用方法
基本用法
将需要支持下拉刷新的内容包裹在组件内:
<template>
<custom-refresh
:offsetTop="60"
@refresh="handleRefresh"
@refresh-finished="handleRefreshFinished"
ref="customRefresh"
>
<view class="your-content">
<!-- 页面内容 -->
</view>
</custom-refresh>
</template>
<script>
export default {
methods: {
handleRefresh() {
// 执行刷新操作,如加载新数据
this.loadData();
},
handleRefreshFinished() {
// 刷新结束后可执行的操作
console.log('刷新完成');
}
}
}
</script>
手动触发刷新
// 手动开始刷新
this.$refs.customRefresh.startRefresh();
// 手动结束刷新
this.$refs.customRefresh.finishRefresh();
组件属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
offsetTop | Number | 60 | 刷新指示器的顶部偏移量,单位为px |
pullText | String | '释放立即刷新' | 下拉状态的提示文字 |
refreshText | String | '正在刷新...' | 刷新中的提示文字 |
loadingIcon | String | '' | 自定义loading图标路径,为空时使用默认图标 |
duration | Number | 1000 | 刷新动画持续时间,单位为毫秒 |
showText | Boolean | false | 是否显示提示文字 |
组件事件
事件名 | 说明 | 参数 |
---|---|---|
refresh | 触发刷新时触发 | 无 |
refresh-finished | 刷新完成后触发 | 无 |
组件方法
方法名 | 说明 | 参数 |
---|---|---|
startRefresh | 手动开始刷新 | 无 |
finishRefresh | 手动结束刷新 | 无 |
注意事项
- 组件内部已处理触摸事件,不需要在父组件中重复处理
- 组件适用于微信小程序,其他平台没有实测
- 组件会自动在2秒后结束刷新状态,可通过duration属性调整时间
- 在微信小程序中使用时,需要关闭原生下拉刷新(enablePullDownRefresh: false),避免与自定义刷新组件冲突,在pages.json中设置对应页面的mp-weixin配置:
{ "path": "pages/index/index", "style": { "mp-weixin": { "backgroundTextStyle": "dark", "disableScroll": false, "enablePullDownRefresh": false } } }