From 2d27c4f7f8fa8d289c6d674d95d4468a42bb6b90 Mon Sep 17 00:00:00 2001
From: Burt <1020103647@qq.com>
Date: Wed, 3 Jan 2024 21:06:36 +0800
Subject: [PATCH] =?UTF-8?q?feat(onRefresherRefresh):=20=E8=87=AA=E5=AE=9A?=
=?UTF-8?q?=E4=B9=89=E4=B8=8B=E6=8B=89=E5=88=B7=E6=96=B0=EF=BC=8C=E4=BC=98?=
=?UTF-8?q?=E5=8C=96=E6=95=B4=E4=BD=93=E5=88=B7=E6=96=B0=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages.json | 1 +
src/pages/my/index.vue | 34 +++++++++++++++++++++++++++++-----
2 files changed, 30 insertions(+), 5 deletions(-)
diff --git a/src/pages.json b/src/pages.json
index 7161a1a..e46df0b 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -11,6 +11,7 @@
"style": {
"navigationBarTitleText": "我的",
"enablePullDownRefresh": true,
+ "backgroundColor": "#23c09c",
"navigationStyle": "custom"
}
}
diff --git a/src/pages/my/index.vue b/src/pages/my/index.vue
index 38f0576..6d1136d 100644
--- a/src/pages/my/index.vue
+++ b/src/pages/my/index.vue
@@ -20,21 +20,26 @@
顶部区域
可以是标题，也可以是个人中心头像等
建议本区域高度不低于200rpx
-
+
注意，上面的导航栏渐变效果仅微信端支持，且上面的导航栏无法抽为组件引入使用，否则滚动效果没有了。如果不只是微信小程序使用，可以
onPageScroll 实现全端效果一样，另外如果是app端，还可以配置 titleNView。参考
https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
-
+
+
+
@@ -44,13 +49,27 @@ import { onPullDownRefresh } from '@dcloudio/uni-app'
const { pages, isTabbar, onScrollToLower, safeAreaInsets } = useNavbarWeixin()
-// 发现原生下拉刷新效果并不好，在微信里面只有顶部导航栏下拉才生效，页面区域下拉不生效，体验不好
+// 发现原生下拉刷新效果并不好，在微信里面只有顶部导航栏下拉才生效，页面区域下拉不生效，体验不好，结合自定义下拉刷新效果很好
onPullDownRefresh(() => {
- console.log('refresh')
setTimeout(function fn() {
+ console.log('refresh - onPullDownRefresh')
+ // 关闭动画
uni.stopPullDownRefresh()
}, 1000)
})
+
+// 当前下拉刷新状态
+const isTriggered = ref(false)
+// 自定义下拉刷新被触发
+const onRefresherRefresh = async () => {
+ // 开始动画
+ isTriggered.value = true
+ setTimeout(function fn() {
+ console.log('refresh - onRefresherRefresh')
+ // 关闭动画
+ isTriggered.value = false
+ }, 1000)
+}