From 27cdd1565d545618f7f20ed554f1d5f0efb4446b Mon Sep 17 00:00:00 2001
From: linju <linju@dcloud.io>
Date: Wed, 2 Aug 2023 19:59:30 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20scroll-view=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=88=B7=E6=96=B0=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/tabBar/template.uvue                    | 20 ++++--
 .../custom-refresher/custom-refresher.uvue    | 70 +++++++++++++++++++
 .../refresh-box/refresh-box.uvue              | 46 ++++++++++++
 3 files changed, 132 insertions(+), 4 deletions(-)
 create mode 100644 pages/template/custom-refresher/custom-refresher.uvue
 create mode 100644 pages/template/custom-refresher/refresh-box/refresh-box.uvue

diff --git a/pages/tabBar/template.uvue b/pages/tabBar/template.uvue
index 53c9de73..c0937c12 100644
--- a/pages/tabBar/template.uvue
+++ b/pages/tabBar/template.uvue
@@ -52,10 +52,16 @@
 						open: false,
 						enable: false,
 						pages: [] as Page[]
+					},{
+						id: "scroll-fold-nav",
+						url: "scroll-fold-nav",
+						name: "随滚动折叠的导航栏",
+						open: false,
+						pages: [] as Page[]
 					},{
 						id: "scroll-fold-nav2",
 						url: "scroll-fold-nav2",
-						name: "随滚动折叠的导航栏",
+						name: "随滚动折叠的导航栏2",
 						open: false,
 						pages: [] as Page[]
 					}, {
@@ -67,12 +73,18 @@
 						pages: [] as Page[]
 
 					}, {
-						id: "custom-pull-page",
+						id: "custom-refresher",
 						url: "custom-pull-page",
-						name: "自定义上拉下拉效果",
+						name: "自定义上拉下拉效果(前端实现)",
 						open: false,
 						pages: [] as Page[]
-					},
+					},{
+						id: "custom-refresher",
+						url: "custom-refresher",
+						name: "自定义下拉刷新（原生实现）",
+						open: false,
+						pages: [] as Page[]
+					},
 					{
 						id: "pull-zoom-image",
 						url: "pull-zoom-image",
diff --git a/pages/template/custom-refresher/custom-refresher.uvue b/pages/template/custom-refresher/custom-refresher.uvue
new file mode 100644
index 00000000..a363b672
--- /dev/null
+++ b/pages/template/custom-refresher/custom-refresher.uvue
@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <scroll-view class="scroll-view" 
+        :refresher-enabled="true" :refresher-triggered="refresherTriggered" refresher-default-style="none"
+        @refresherpulling="onRefresherpulling"
+        @refresherrefresh="onRefresherrefresh"
+        :refresher-threshold="refresherThreshold"
+    >
+      <view v-for="i in 7" class="item">
+        item-{{i}}
+      </view>
+      <refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+  import RefresherEvent from 'io.dcloud.uniapp.runtime.RefresherEvent';
+  import refreshBox from './refresh-box/refresh-box.uvue';
+  export default {
+    components:{refreshBox},
+    data() {
+      return {
+        refresherTriggered:false,
+        refresherThreshold:40,
+        pullingDistance:0
+      }
+    },
+    computed:{
+      state():number{
+        if(this.refresherTriggered){
+          return 2
+        }
+        if(this.pullingDistance > this.refresherThreshold){
+          return 1
+        }else{
+          return 0
+        }
+      }
+    },
+    methods: {
+      onRefresherpulling(e:RefresherEvent){
+        // console.log('onRefresherpulling',e.detail.dy)
+        this.pullingDistance = e.detail.dy
+      },
+      onRefresherrefresh(){
+        this.refresherTriggered = true
+        setTimeout(()=>{
+          this.refresherTriggered = false
+        },1000)
+      },
+      // onRefresherrestore(e:RefresherEvent){
+      //   console.log('onRefresherrestore',e)
+      // },
+      // onRefresherabort(e:RefresherEvent){
+      //   console.log('onRefresherabort',e)
+      // },
+    }
+  }
+</script>
+
+<style>
+  .scroll-view {
+    flex: 1;
+  }
+  .item {
+    height: 80px;
+    justify-content: center;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/template/custom-refresher/refresh-box/refresh-box.uvue b/pages/template/custom-refresher/refresh-box/refresh-box.uvue
new file mode 100644
index 00000000..fe247022
--- /dev/null
+++ b/pages/template/custom-refresher/refresh-box/refresh-box.uvue
@@ -0,0 +1,46 @@
+<template>
+  <view>
+    <view slot="refresher" class="refresh-box">
+      <image class="logo" src="/static/uni.png" mode="widthFix"></image>
+      <text class="tip-text">{{text[state]}}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        text: ['继续下拉执行刷新', '释放立即刷新', '刷新中...']
+      }
+    },
+    props: {
+      state: {
+        type: Number,
+        default: 0
+      },
+      methods: {
+
+      }
+    }
+  }
+</script>
+
+<style>
+  .refresh-box {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .logo {
+    width: 30px;
+    height: 30px;
+    margin-top: 3px;
+  }
+
+  .tip-text {
+    color: #888;
+    font-size: 12px;
+    padding: 2px 0;
+  }
+</style>
\ No newline at end of file
-- 
GitLab